CSS: transition from display: none to display: block on “hover”

Transition from display: none to display: block is inpossible in CSS on "hover". But there is a workaround.


“keyframes” is the solution.

1. define a “keyframe”:

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}


@keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}

2. Use this “keyframe” on “hover”:


div a span {
display: none;
}

div a:hover span {
display: block;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-name: fadeIn;
animation-duration: 1s;
}