Question

如何让CSS动画不在页面加载时播放，而是在页面加载时的第一次播放之外每隔一段时间播放一次？我有以下内容：

.anim{
    animation:  animate 0.6s
}

@keyframes animate{
    from{transform: rotate(180deg)}
    to{transform: rotate(0deg)}
}

因此第一次加载页面时，.anim容器会旋转，但我打算稍后使用onclick事件触发旋转。默认情况下会应用anim类，并且在调用onclick事件后，将移除anim类，并将另一个具有自己动画的类应用于该元素。上面的动画旨在作为从anim类到另一个类的过渡。如何仅在转换时播放，而不是在页面完成加载时播放？有没有办法在页面加载后使用JavaScript应用anim类，但是阻止动画播放？

Answer 1

修改代码的方式是在.anim事件发生时将类onclick提供给容器。然后在容器中添加一个animationend侦听器，它将在动画结束时添加所需的类。

Answer 2

要动态启动动画，您应该添加应用所述动画的类。您还可以利用动画启动＆＃39;动画启动＆＃39;和动漫艺术＆＃39;在动画元素上触发的事件。在您特定的情况下，您想要播放动画，在添加另一个类之前，您可能希望只有一个类可以执行您想要的操作，并添加它。但是如果你想使用两种你可以做的。

function addFirstClass(e){
  var tar= e.target;
  tar.addEventListener('animationend', addSecondClass);
  tar.classList.add('className');
}

function addSecondClass(e) {
  var tar= e.target;
  tar.removeEventListener('animationend', addSecondClass);
  tar.classList.remove('className');
  tar.classList.add('newClass');
}

在页面加载时禁用CSS动画，但每隔一段时间工作一次

2 个答案: