animacji CSS trudne błąd w Chrome

Question

Mam następujące 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; 
} 

a prosty kod HTML:

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

Kiedy go uruchomić, "Hello" pojawiają się w ciągu 1 sekundy i 3 sekund zamiast gasnąc na 1 sekundę, natychmiast zanika. Tutaj jest na JSFiddle: http://jsfiddle.net/3er6y0df/

Próbowałem przełączanie go w ten sposób:

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

i działa idealnie.

Muszę wspomnieć, że ten błąd pojawił się tylko w Chrome (wersja 37.0.2062.120 Zbudowany na Debianie 7.6, działający na Debianie 7.7 (281580) (64-bit)), sprawdzam to w Firefoksie i IE11 i tam jest nie ma problemu.

Answer 1

ja eksperymentowałem trochę i znalazłem wiele prostsze rozwiązanie:

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

Korzystanie 1001ms zamiast 1s = 1000ms) (nie zostanie zauważony przez zwykłego ludzkiego oka :)

Answer 2

Naprawdę nie jest to łatka, ale może być alternatywą.

Zamiast animować element z klatkami kluczowymi + animacją na samych elementach, dlaczego nie wstawić ich do animacji klatek kluczowych?

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