Question

我有一个延迟的CSS动画，我在延迟期间暂停它。它在Firefox和Chrome上运行正常，＆＃34; Hello＆＃34;不动。但是在Safari上，动画会跳转到最后一帧。为什么以及如何解决？

＆＃13;

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

＆＃13;

#animation {
  animation: test 2s linear 2s;
}

@keyframes test {
  to {
    transform: translateY(100px);
  }
}

＆＃13;

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

＆＃13;

如果我删除2s延迟，将持续时间设置为4s，并使用transform：none添加关键帧，我可以使这个简单的示例工作。然而，我的真实情况有多个与延迟同步的动画。

Answer 1

当超时设置为小于动画延迟的值时，Safari行为只会出错。所以，一种解决方法是通过paused 将初始状态设置为animation-play-state，然后通过JS控制它，如下所示：

＆＃13;

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);

＆＃13;

#animation {
  animation: test 2s linear 3s;
  animation-play-state: paused; /* Pause it right after you set it */
}

@keyframes test {
  to {
    transform: translateY(100px);
  }
}

＆＃13;

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

＆＃13;

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

Codepen demo

Answer 2

这不是问题的答案。但是，如果删除动画延迟，暂停和重新启动动画将按预期工作。似乎动画延迟是导致问题的原因。也许而不是依靠css来处理延迟，用javascript编程控制动画延迟。

见下文暂停和运行动画

＆＃13;

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);

＆＃13;

#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);
  }
}

＆＃13;

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

＆＃13;

Safari中的CSS动画错误

2 个答案: