我想在重复动画之间的特定时间暂停动画

我将从json文件中获取数据,例如暂停1秒,暂停2秒,暂停3秒,暂停4秒。

我只能使用javascript / css hack来暂停动画。

Animation is purely made in CSS.

https://codepen.io/prax/pen/WORMEJ


提前致谢

最佳答案

无论使用什么“获取数据”功能,对要暂停的元素应用animation-play-state: paused;,然后在准备取消暂停时将其删除。

这是一个演示。



document.getElementById('button').addEventListener('click',function() {
  // fetch data & pause & setTimeout to un-pause
  document.getElementById('div').classList.add('pause');
  var seconds = 1; // use a different value to pause for different times
  var timeout = setTimeout(function() {
    document.getElementById('div').classList.remove('pause');
  },seconds * 1000)
})

div {
  animation: foo 3s infinite;
}
@keyframes foo {
  50% {
    color: red;
  }
}
.pause {
  animation-play-state: paused;
  background: #eee;
}

<div id="div">asdf</div>
<button id="button">button</button>

10-05 20:57
查看更多