css 如何动画循环 |vue.js 公用css

/* 定义一个自旋转的方块 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.square {
animation-name: spin; /* 设置动画的名称 */
animation-duration: 2s; /* 设置动画执行时长 */
animation-iteration-count: infinite; /* 设置动画循环次数，infinite表示无限循环 */
}

上面的代码定义了一个名为”spin”的关键帧，它让一个方块以左上角为中心无限自旋转。接着定义了一个类名为”square”的元素，它使用了”spin”动画，设置了动画执行时长为2秒，动画循环次数为无限循环。

除了”animation-iteration-count”属性，CSS中还有其他控制动画循环的属性，例如”animation-direction”可以控制动画的方向和循环的方向。”animation-play-state”可以暂停和恢复动画。更多关于CSS动画的属性和使用方法，请参考相关资料。

总之，CSS动画的循环功能非常实用，特别是在网站的装饰方面，可以让网站更具吸引力和活力。希望本文对您有所帮助，谢谢阅读！