如何使 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
监听器,该监听器将在动画结束时添加您想要的类。
关于javascript - 在页面加载时禁用 CSS 动画,但每隔一段时间工作一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35131540/