CSS3 Animation Delay longer than Duration breaks animation - css

Question

I am attempting to animate an element from display:none;opacity:0; to display:block;opacity:1;. While the below animation works, when I introduce a delay into the animation I find I cannot set the delay value higher than the animation duration value. When I do, the animation is ignored.
How do I set my delay to take e.g. 2 seconds and my animation duration to be 300ms without it breaking?
div p + p {
display: none;
opacity: 0;
}
div p:hover + p {
display: block;
opacity: 1;
/* browser prefixes removed for brevity */
-webkit-animation: fadeInFromNone 300ms 900ms linear;
animation: fadeInFromNone 300ms 900ms linear;
}
div.working p:hover + p {
display: block;
opacity: 1;
/* browser prefixes removed for brevity */
-webkit-animation: fadeInFromNone 300ms 300ms linear;
animation: fadeInFromNone 300ms 300ms linear;
}
#-webkit-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block ;
opacity: 0;
}
100% {
display: block ;
opacity: 1;
}
}
keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block ;
opacity: 0;
}
100% {
display: block ;
opacity: 1;
}
}
<div>
<p>Hover on me (broken)</p>
<p>Peek-a-boo</p>
</div>
<div class="working">
<p>Hover on me (working)</p>
<p>Peek-a-boo</p>
</div>

Answer 1

This boils down to a timing issue.
Initially the p has display:none; and opacity:0;. On hover the p has display:block; and opacity:1;, and then, after the delay, this is reset to display:none; and opacity:0; when the animation starts.
By setting the hover p to have display:block; and animating only the opacity, then I almost get the desired result. To stop the animation from completing and setting the p as opacity:0 again I add the forwards attribute to the animation:
div p + p {
display: none;
opacity: 0;
}
div p:hover + p {
display: block;
/* browser prefixes removed for brevity */
-webkit-animation: fadeInFromNone 300ms linear 900ms forwards;
animation: fadeInFromNone 300ms linear 900ms forwards;
}
#-webkit-keyframes fadeInFromNone {
from { opacity:0; }
to { opacity:1; }
}
keyframes fadeInFromNone {
from { opacity:0; }
to { opacity:1; }
}
<div>
<p>Hover on me</p>
<p>Peek-a-boo</p>
</div>

Answer 2

Why am I using an animation for opacity when I could use a transition? My main reason for doing an animation was to get display:block/none to work, but in my other answer it still doesn't work as I want it to. In this answer I am using visibility:hidden/visible and opacity:0/1 for the animation. The transition is so on hover that the transition takes 1 second to start (note transition-delay on the hover code), while on mouse-out the opacity will fade out first over nearly a second and the visibility will just stop being visible BUT it has a delay of the same amount as the opacity duration.
This gives me the lovely delayed fade-in / immediate fade-out that I wanted.
div p + p {
visibility:hidden;
opacity: 0;
/* browser prefixes removed for brevity */
transition:visibility 0s linear 900ms, opacity 900ms linear;
}
div p:hover + p {
visibility:visible;
opacity:1;
/* browser prefixes removed for brevity */
transition-delay:1s;
}
<div>
<p>Hover on me</p>
<p>Peek-a-boo</p>
</div>