Safari中的CSS动画错误

Question

我有一个延迟的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添加关键帧,我可以使这个简单的示例工作.然而,我的真实案例有多个与延迟同步的动画.

Answer 1

当超时设置为小于动画延迟的值时,Safari行为只是错误.因此,解决方法是将初始状态设置为pausedviaanimation-play-state,然后通过JS控制它,如下所示:

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>

尝试不同的超时值以查看它是否有效.不能说为什么会发生这种情况.对我来说看起来像个错误.在OS X El Capitan 10.11.6/Safari 11.0(11604.1.38.1.7)上测试.

Codepen演示

Answer 2

这不是问题的答案。但是，如果您删除动画延迟，则暂停和重新启动动画会正常工作。看来动画延迟是导致问题的原因。也许不是依靠 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>