Bug d'animation CSS dans Safari

Question

J'ai une animation CSS avec un délai et je la mets en pause pendant le délai. Cela fonctionne comme prévu sur Firefox et Chrome, le "Bonjour" ne bouge pas. Cependant sur Safari, l'animation saute à la dernière image. Pourquoi et comment réparer s'il vous plaît?

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>

Si je supprime le délai 2s, définissez la durée à 4 s, et ajouter une image clé avec transform: none, je peux faire ce travail simple exemple. Cependant mon cas réel a plusieurs animations qui sont synchronisées avec des retards.

Answer 1

Ceci n'est pas une réponse au problème. Cependant, si vous supprimez le délai d'animation, la suspension et le redémarrage de l'animation fonctionnent comme prévu. Il semble alors que le délai d'animation est ce qui cause le problème. Peut-être plutôt que de compter sur css pour gérer le retard, contrôlez par programme le retard d'animation avec javascript.

Voir ci-dessous une pause et lancer l'animation

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

Le comportement Safari est bogué que lorsque délai d'attente est réglé à une valeur inférieure au retard d'animation. Donc, une solution de contournement est de définir l'état initial à paused via animation-play-state puis contrôler via JS, comme indiqué ci-dessous:

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>

Essayez différentes valeurs de délai d'attente pour le voir travailler. Je ne peux pas dire pourquoi cela se passe bien. On dirait un bug pour moi. Testé sur OS X El Capitan 10.11.6/Safari 11.0 (11604.1.38.1.7).

Codepen demo