我有一个带有延迟的CSS动画,我在延迟期间暂停它。它在Firefox和Chrome上的工作与预期一样,"Hello“不会移动。但是在Safari上,动画会跳到最后一帧。为什么?请告诉我如何修复?
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>
如果我去掉2s的延迟,将持续时间设置为4s,并添加一个带有transform:none的关键帧,我就可以让这个简单的例子工作。然而,我的实际案例中有多个动画是通过延迟同步的。
发布于 2017-10-14 00:57:34
这不是问题的答案。但是,如果删除动画延迟,则暂停和重新启动动画会正常工作。似乎动画延迟是导致问题的原因。也许不是依赖css来处理延迟,而是使用javascript以编程方式控制动画延迟。
请参阅下面的暂停和运行动画
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>
https://stackoverflow.com/questions/46668804
复制相似问题