在网页开发中，通过HTML结合CSS关键帧技术可以轻松实现各类循环动画效果，这种方式不需要依赖JavaScript就能完成基础动态交互，性能表现也更稳定。只需要定义好动画的关键状态，再将动画绑定到对应的HTML元素上，就能让元素按照预设规则持续播放动画。
CSS关键帧动画基础概念
CSS关键帧动画通过@keyframes规则定义，开发者可以指定动画在起始、中间、结束等不同时间点的元素样式，浏览器会自动补全中间的过渡效果。要实现循环动画，核心是需要将动画的迭代次数设置为无限次。
@keyframes规则语法
@keyframes后面跟着动画名称，内部通过百分比或者from、to关键字定义不同时间点的样式，示例如下：
/* 定义一个名为move的动画 */
@keyframes move {
from {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
to {
transform: translateX(0);
}
}
HTML与CSS结合实现循环动画
实现循环动画需要两步，首先在HTML中定义需要添加动画的元素，然后在CSS中通过animation属性将定义好的关键帧动画绑定到元素上，同时设置循环参数。
基础循环动画示例
下面是一个让div元素左右来回移动的循环动画完整实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环动画示例</title>
<style>
/* 定义关键帧动画 */
@keyframes loop_move {
from {
margin-left: 0;
}
to {
margin-left: 200px;
}
}
/* 动画元素样式 */
.animate_box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 绑定动画：动画名称 持续时间 速度曲线 延迟时间 迭代次数 方向 */
animation: loop_move 2s linear 0s infinite alternate;
}
</style>
</head>
<body>
<div class="animate_box"></div>
</body>
</html>
animation属性参数说明
animation是复合属性，也可以拆分为单个属性设置，相关参数含义如下：
| 属性名 | 含义 | 循环动画常用值 |
|---|---|---|
| animation-name | 指定要绑定的@keyframes动画名称 | 自定义的关键帧名称 |
| animation-duration | 动画完成一次迭代的时长 | 时间值，如2s、500ms |
| animation-timing-function | 动画的速度曲线 | linear、ease、ease-in-out等 |
| animation-delay | 动画开始前的延迟时间 | 0s（无延迟）或指定时间 |
| animation-iteration-count | 动画迭代次数 | infinite（无限循环） |
| animation-direction | 动画播放方向 | alternate（往返播放）、normal（正向循环） |
常见循环动画场景实现
旋转循环动画
实现元素持续旋转的动画，只需要定义旋转角度的关键帧即可：
/* 旋转关键帧 */
@keyframes rotate_loop {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 旋转元素样式 */
.rotate_box {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #f56c6c;
/* 绑定旋转动画，无限循环 */
animation: rotate_loop 1.5s linear infinite;
}
渐变循环动画
实现元素背景色循环变化的动画，关键帧中定义不同时间点的背景色即可：
/* 背景色渐变关键帧 */
@keyframes color_loop {
0% {
background-color: #409eff;
}
33% {
background-color: #67c23a;
}
66% {
background-color: #e6a23c;
}
100% {
background-color: #409eff;
}
}
/* 渐变元素样式 */
.color_box {
width: 120px;
height: 120px;
animation: color_loop 3s ease infinite;
}
循环动画注意事项
- 如果动画需要暂停，可以通过
animation-play-state属性设置，值为paused时暂停，running时继续播放。 - 关键帧中如果涉及transform属性，不同状态的transform函数需要保持一致，避免出现样式跳变。
- 循环动画会持续占用浏览器渲染资源，不要在页面中同时添加过多复杂的循环动画，避免影响页面性能。
- 如果需要兼容旧版本浏览器，可以添加
-webkit-等前缀，例如-webkit-animation、@-webkit-keyframes。
循环动画的核心是通过animation-iteration-count: infinite设置无限迭代，结合@keyframes定义好动画的关键状态，就能实现各类持续的动态效果。