javascript - 在页面加载时禁用 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 监听器，该监听器将在动画结束时添加您想要的类。