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

【问题标题】：Disable CSS animation on page load but work every other time在页面加载时禁用 CSS 动画，但每隔一段时间工作一次
【发布时间】：2016-02-01 13:16:51
【问题描述】：

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

.anim{
    animation:  animate 0.6s
}

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

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

【问题讨论】：

标签： javascript css animation

【解决方案1】：

修改您的代码，以便在发生onclick 事件时将.anim 类提供给您的容器。然后在您的容器中添加一个animationend 侦听器，该侦听器将在动画结束时添加您想要的类。

【讨论】：

一些代码作为示例可以帮助那些不太喜欢javascript的人
@Saba 我需要一些代码来修改它，OP 没有提供。
.anim 类包含其他样式规则，所以我等不及要应用样式的onclick 事件。
@TroubleZero 然后将 .anim 类拆分为 2 个类。一个带有您希望在加载时出现的 css 规则，另一个带有您希望在单击它时发生的 css 规则:)

【解决方案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');
}

【讨论】：