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

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

修改代码，以便在发生onclick事件时将类.anim赋予容器。 然后将animationend侦听器添加到您的容器中，该侦听器将在动画结束时添加所需的类。

Answer 2

要动态启动动画，您应该添加应用所述动画的类。 您还可以利用在动画元素上触发的“ animationend”，“ animationstart”和“ animationiteration”事件。 在您要播放动画的特定情况下，在添加另一个类之前，您可能只想拥有一个可以执行所需操作的类，然后添加它。 但是，如果要使用两个分类，则可以执行。

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