Safari中的CSS动画错误
Safari中的CSS动画错误
提问于 2017-10-10 22:04:05
我有一个带有延迟的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的关键帧，我就可以让这个简单的例子工作。然而，我的实际案例中有多个动画是通过延迟同步的。
回答 1
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46668804
复制相关文章
相似问题