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

Disable CSS animation on page load but work every other time

本文关键字：工作 一段时间 一次 加载 动画 CSS      更新时间：2023-09-26

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

.anim{
    animation:  animate 0.6s
}
@keyframes animate{
    from{transform: rotate(180deg)}
    to{transform: rotate(0deg)}
}

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

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

要动态启动动画，您应该添加应用所述动画的类。您还可以利用在动画元素上触发的"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');
}
相关文章：