html - CSS animation tricky bug in Chrome -

html - CSS animation tricky bug in Chrome -

i have next css:

@-webkit-keyframes fade-out { { opacity: 1; } { opacity: 0; } } @-webkit-keyframes fade-in { { opacity: 0; } { 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 code:

<div class="intro-text-0">hello</div> <div class="intro-text-1">holla</div>

when run it, "hello" appear in 1 sec , in 3 seconds instead of fading out 1 second, fades out instantly. here on jsfiddle: http://jsfiddle.net/3er6y0df/

i tried switching this:

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

and works perfectly.

i must mention, bug appeared in chrome (version 37.0.2062.120 built on debian 7.6, running on debian 7.7 (281580) (64-bit)), check out in firefox , ie11 , there no problem there.

not bugfix though alternative.

instead of animating element keyframes + animation on elements why not set in keyframe animation?

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

html css google-chrome