Transition from 'display: none' to 'display: block'

Let's assume that we created the following structure:

html
<div class = 'Message'>
    <div class = 'Show'>I display first.</div>
    <div class = 'ShowOnHover'>I display on hover.</div>
</div>

If we want to display a transition from display: none to display: block, we can define an animation:

css
.Show{
    display: block;
}
.ShowOnHover{
    display: none;
}
.Message:hover .Show{
    display: none;
}
.Message:hover .ShowOnHover{
    animation: fade 1s ease-in-out;
    display: block;
}
@keyframes fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}