首页 - 互联网

CSS 循环动画 animation 效果解析和演示

作者: 五速梦信息网
时间: 2026年04月20日 04:37

相关属性

@keyframes 定义动画的关键帧序列 animation-name 指定 @keyframes 动画的名称 animation-duration 动画单次循环的持续时间（必需属性，否则动画不会生效） animation-timing-function 动画速度曲线 animation-iteration-count 动画播放次数，数字或者 infinite 无限循环 animation-delay 动画开始前的等待时间（延迟） animation-direction 动画播放方向 animation-fill-mode 控制动画执行前后的样式状态 animation-play-state 控制动画播放状态，暂停/播放 animation 简写属性，包含 duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name。 2023 新增属性： animation-composition 指定了当多个动画同时影响同一属性时应使用的复合操作。

@keyframes

@keyframes 用于定义动画关键帧，还是必须的那种，没有 @keyframes 的关键帧，CSS 动画就没法玩！！在使用 CSS 动画前，必须优先定义动画关键帧，写法：

@keyframes ani1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(605px);
  }
}

以上代码定义了一个名为 ani1 的动画关键帧序列，其中 0% 表示动画开始时没有位移，100% 表示动画结束时位移了 605px。 关键帧名称定义规范： 必须以字母（a-z, A-Z）、下划线（_）或连字符（-）开头，后面可以是字母、数字（0-9）、下划线或连字符，建议不要使用 CSS 关键字，虽然不一定报错。除了使用百分比定义关键帧序列，还可以使用关键字 from（0%）和 to（100%）定义，比如：

@keyframes ani1 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(605px);
  }
}

还可以多个帧用同一条规则：

@keyframes ani1 {
  0% {
    transform: translateX(0);
  }
  40%,
  60% { /* 40% 和 60% 的关键帧都是同一个位置，表示元素不动 */
    transform: translateX(305px);
  }
  100% {
    transform: translateX(605px);
  }
}

需注意关键帧的 CSS 属性不支持 !important，有此写法浏览器会判定属性值无效！！

animation-name

用于指定动画使用的关键帧序列名称，比如：

.child {
  animation-name: ani1;
  animation-name: ani1, ani2; /* 同时使用 ani1 和 ani2 两个关键帧序列 */
}

此时，给 .child 指定了一个 ani1 的关键帧序列，但动画还无法执行，原因是缺少动画持续时间。

animation-duration

指定执行一次动画的运行时长，与前文说过的 transition-duration 一致，以秒（s）或毫秒（ms）为单位，默认是 0s。语法：

``` css
.child {
  animation-duration: 2s;
}

看例子，同时应用多个关键帧序列：

<div>
  <div>1s</div>
  <div>2s</div>
  <div>3s</div>
</div>

效果：

animation-timing-function

用于设置速度曲线，控制动画速度变化，与前文的 transition-timing-function 一致，默认是 ease。 关于 贝塞尔曲线 可阅读前一篇文章！ 示例：

<div>
  <div>ease</div>
  <div>ease-in-out</div>
  <div>cubic-bezier</div>
</div>

效果：

animation-iteration-count

动画默认只执行 1 此，上面效果看起来是循环执行，原因是 gif 图片会重复播放！！示例：

<div>
  <div>ease</div>
  <div>ease-in-out</div>
  <div>cubic-bezier</div>
</div>

效果：

animation-delay

设置动画开始时的等待时长，默认是 0s。示例：

<div>
  <div>ease</div>
  <div>ease-in-out</div>
  <div>cubic-bezier</div>
</div>

效果：

animation-direction

设置动画方向，默认是 normal，即从开始到结束。有效值： normal 动画在每个循环中正向播放。 reverse 动画在每个循环中反向播放。动画将从结束状态往开始状态运动，速度曲线也将反转。 alternate 动画在每个循环中正反交替播放，第一次迭代是正向播放。 alternate-reverse 动画在每个循环中正反交替播放，第一次迭代是反向播放。 alternate 的两个值会让动画往返来回执行，reverse 两个值会让动画倒着执行。示例：

<div>
  <div>normal</div>
  <div>reverse</div>
  <div>alternate</div>
  <div>alternate-reverse</div>
</div>

效果：

animation-fill-mode

设置元素动画开始时和结束时的状态，可以理解为动画开始和结束时，是用关键帧序列的 0% 还是 100% 的状态，这与运动方向和运动次数有关。有效值： none 默认值，不设置状态。 forwards 设置为动画结束状态。 backwards 设置为动画开始状态。 both 动画将遵循 forwards 和 backwards 的规则，从而在两个方向上扩展动画属性。示例：

<div>
  <div>none</div>
  <div>forwards</div>
  <div>backwards</div>
  <div>both</div>
</div>

效果：可以看到，在动画开始时，backwards 和 both 会应用 0% 的状态，在动画结束时，forwards 和 both 会应用 100% 的状态。

animation-play-state

用于控制动画暂停、播放状态。比如最常见的音乐播放，有个转圈圈的音符，在音乐暂停时候，音符需要暂停。如果使用移除属性的方式，就会回到元素默认状态，而没办法做到暂停。

<div>
  <div>音符</div>
</div>

效果：

animation

使用简写 animation，可以同时设置多个动画属性，毕竟要实现一个动画需要多个属性配合，只写一个属性就要省事多了。语法：

/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused ani1;
/* 多个动画 */
animation:
  3s linear ani1,
  3s ease-out 5s ani2;

animation-composition

使用此属性时，需注意浏览器兼容性，基本上都是2023年后的浏览器版本才开始支持！！有效值： replace 默认值，替换已有属性。 add 累加效果。 accumulate 组合效果。看示例：

<div>
  <div>replace</div>
  <div>add</div>
  <div>accumulate</div>
</div>

效果：以上示例，元素自身携带有 transform: rotate(-5deg);，动画属性也进行了 transform: translateX(605px); 变换，三个值区别就显示出来了：

replace 覆盖了元素自身的 transform 变换。
add 将元素自身的属性值放在了动画属性前面，变成了 transform: rotate(-5deg) translateX(605px);
accumulate 将两个属性组合成了一个 3D 矩阵 transform: matrix3d(0.996195, -0.0871557, 0, 0, 0.0871557, 0.996195, 0, 0, 0, 0, 1, 0, 605px, 0, 0, 1); 如果使用 width 属性动画，add 和 accumulate 则看起来没有任何区别。

四个实验性属性

实验性属性规范还未定稿，小范围浏览器支持，未来有可能还会发生变化。 animation-timeline 指定了用于控制 CSS 动画进度的时间线。 animation-range-start 设置 timeline 的开始位置。 animation-range-end 设置 timeline 的结束位置。 animation-range 简写属性，包含 animation-range-start, animation-range-end。使用 animation-timeline 做一个跟滚动条有关的动画效果，示例：

<div>
<div>timeline</div>
</div>

效果：

写在最后

其他与动画相关的属性：

scroll-timeline 滚动条触发动画
offset-path 让元素沿复杂路径运动 CSS 动画在书写上比 JS 简单很多，也让前端的动画实现变得更容易，但一些涉及到用户交互的动画，还是必须让 JS 登场才行。 CSS animation 与 transition 都能实现动画效果，transition 胜在单次属性过渡，而 animation 胜在可以指定关键帧实现更加复杂的动画场景。