CSS animation is a tricky bug in Chrome

Question

I have the following CSS:

@-webkit-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .intro-text-0 { opacity: 0; -webkit-animation: fade-in 1s linear 1s, fade-out 1s linear 3s; -webkit-animation-fill-mode: forwards; } .intro-text-1 { opacity: 0; -webkit-animation: fade-in 1s linear 2s, fade-out 1s linear 4s; -webkit-animation-fill-mode: forwards; } 

And simple HTML:

 <div class="intro-text-0">Hello</div> <div class="intro-text-1">Holla</div> 

When I run it, "Hello" appears after 1 second and after 3 seconds, and does not disappear within 1 second, it instantly disappears. Here it is on JSFiddle: http://jsfiddle.net/3er6y0df/

I tried switching it to this:

 .intro-text-0 { opacity: 0; -webkit-animation: fade-in 1s linear 2s, fade-out 1s linear 4s; -webkit-animation-fill-mode: forwards; } 

And it works great.

I should mention that this error only appeared in Chrome (version 37.0.2062.120, built-in to Debian 7.6, running on Debian 7.7 (281580) (64-bit)), I check it in Firefox and IE11, and there is no problem there.

Answer 1

I experimented a bit and found a much simpler solution:

 -webkit-animation: fade-in 1s linear 1001ms, fade-out 1s linear 3s; -webkit-animation-fill-mode: forwards; 

Using 1001ms instead of 1s (= 1000 ms) will not be noticed by the regular human eye :)

Answer 2

This is actually not a mistake, although it may be an alternative.

Instead of animating an element with keyframes + animations on the elements themselves, why not put all this into a keyframe animation?

 @keyframes AnimateMe { 0% { opacity:0%; } 80% { opacity:100%; } 100% { opacity:0%; } }