css3实现动画无限循环

最新推荐文章于 2025-03-08 19:23:37 发布

coderJason2020

最新推荐文章于 2025-03-08 19:23:37 发布

阅读量8.6k

点赞数 3

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/wuzhangting/article/details/132431075

版权

本文介绍了如何在CSS3中使用`@keyframes`声明关键帧动画，并通过`animation`属性结合`infinite`关键字实现动画的2秒无限循环。通过调整关键帧百分比和样式，可以定制各种动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要在CSS3中实现动画的无限循环，你可以使用animation 属性和 infinite 关键字。以下是一个示例：

@keyframes myAnimation {
  0% { /* 起始状态 */ }
  50% { /* 中间状态 */ }
  100% { /* 结束状态 */ }
}

.element {
  animation: myAnimation 2s infinite; /* 设置动画为2秒钟的时间，并无限循环 */
}

在上面的示例中，我们首先使用 @keyframes 声明了一个名为 myAnimation 的关键帧动画。然后，在 .element 类选择器中，通过 animation 属性将该动画应用到一个元素上。设置 2s 即动画的时长为2秒，并且使用 infinite 关键字来表示动画应该无限循环。

你可以根据需要调整关键帧的百分比和对应的样式，以创建不同效果的动画。