Błąd animacji CSS w Safari

Question

Mam animację CSS z opóźnieniem i wstrzymuję ją w trakcie opóźnienia. Działa zgodnie z oczekiwaniami w Firefoksie i Chrome, "Witaj" się nie porusza. Jednak w Safari animacja przeskakuje do ostatniej klatki. Dlaczego i jak to naprawić?

function test() { 
 
    var timeout = 1000; 
 
    setTimeout(function() { 
 
    document.getElementById('animation').style.animationPlayState = 'paused'; 
 
    }, timeout); 
 
} 
 

 
document.addEventListener("DOMContentLoaded", test);

#animation { 
 
    animation: test 2s linear 2s; 
 
} 
 

 
@keyframes test { 
 
    to { 
 
    transform: translateY(100px); 
 
    } 
 
}

<div id="animation"> 
 
    Hello (this text should not move) 
 
</div>

Jeśli usunąć 2s opóźnienie, ustaw czas trwania do 4s i dodać klatkę kluczową z transform: none, mogę uczynić ten prosty przykład pracę. Jednak mój prawdziwy przypadek ma wiele animacji, które są zsynchronizowane z opóźnieniami.

Answer 1

To nie jest odpowiedź na problem. Jeśli jednak usuniesz opóźnienie animacji, wstrzymanie i ponowne uruchomienie animacji będzie działać tak, jak powinno. Wydaje się, że przyczyną opóźnienia jest opóźnienie animacji. Być może zamiast polegać na css, aby obsłużyć opóźnienie, programowo kontrolować opóźnienie animacji za pomocą javascript.

Zobacz poniżej zatrzymując i uruchamiając animację

function test() { 
 
    var timeout = 1000; 
 
    setTimeout(function() { 
 
    document.getElementById('animation').style.animationPlayState ='paused'; 
 
    document.getElementById('animation').style.webkitAnimationPlayState ='paused'; 
 
    }, timeout); 
 
    setTimeout(function() { 
 
    document.getElementById('animation').style.animationPlayState='running'; 
 
    document.getElementById('animation').style.webkitAnimationPlayState ='running'; 
 
    }, timeout * 2); 
 
} 
 

 
document.addEventListener("DOMContentLoaded", test);

#animation { 
 
    -webkit-animation: test 2s linear; 
 
     animation: test 2s linear; 
 
} 
 

 
@-webkit-keyframes test { 
 
    to { 
 
    -webkit-transform: translateY(100px); 
 
     transform: translateY(100px); 
 
    } 
 
} 
 

 
@keyframes test { 
 
    to { 
 
    -webkit-transform: translateY(100px); 
 
     transform: translateY(100px); 
 
    } 
 
}

<div id="animation"> 
 
    Hello (this text should not move) 
 
</div>

Answer 2

Zachowanie Safari jest tylko buggy gdy timeout ustawiony na wartość mniejszą niż opóźnienia animacji. Więc obejście jest ustalenie stanu początkowego do paused poprzez animation-play-state a następnie kontrolować za pomocą JS, jak pokazano poniżej:

function test() { 
 
    let el = document.getElementById("animation"); 
 
    let timeout = 1000; 
 
    
 
    // Get the delay. No luck with el.style.animationDelay 
 
    let delay = 
 
    window 
 
     .getComputedStyle(el) 
 
     .getPropertyValue("animation-delay") 
 
     .slice(0, -1) * 1000; 
 

 
    // Only resume and later pause when timeout is greater than animation delay 
 
    if (timeout > delay) { 
 
    el.style.animationPlayState = "running"; 
 
    setTimeout(function() { 
 
     el.style.animationPlayState = "paused"; 
 
    }, timeout); 
 
    } 
 
} 
 

 
document.addEventListener("DOMContentLoaded", test);

#animation { 
 
    animation: test 2s linear 3s; 
 
    animation-play-state: paused; /* Pause it right after you set it */ 
 
} 
 

 
@keyframes test { 
 
    to { 
 
    transform: translateY(100px); 
 
    } 
 
}

<div id="animation"> 
 
    Hello (this text should not move) 
 
</div>

Wypróbuj różne wartości limitu czasu, aby zobaczyć jego pracy. Nie mogę powiedzieć, dlaczego tak się dzieje. Wygląda mi na błąd. Testowany na OS X El Capitan 10.11.6/Safari 11.0 (11604.1.38.1.7).

Codepen demo