animazione CSS difficile bug in Chrome

Question

ho il seguente 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; 
} 

E il semplice codice HTML:

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

quando l'eseguo, "Ciao" appaiono in 1 secondo e 3 secondi invece di dissolversi per 1 secondo, svanisce all'istante. Qui è il JSFiddle: http://jsfiddle.net/3er6y0df/

ho cercato di accenderlo, a questo:

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

e funziona perfettamente.

Devo dire, che questo bug è apparso solo in Chrome (versione 37.0.2062.120 Costruito su Debian 7.6, in esecuzione su Debian 7.7 (281580) (64-bit)), lo controllo in Firefox e IE11 e c'è nessun problema lì.

Answer 1

ho sperimentato un po 'e trovato una soluzione molto più semplice:

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

Utilizzando 1001ms invece 1s (= 1000 ms) non sarà notato da un occhio umano normale :)

Answer 2

Non proprio un bugfix anche se potrebbe essere un'alternativa.

Invece di animare un elemento con fotogrammi chiave + animazione sugli elementi stessi, perché non inserire tutto nell'animazione fotogramma chiave?

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