本文档介绍了 Animate.css 提供的实用类，并解释了如何通过 CSS 变量自定义动画。实用类提供了一种声明式的方式来控制动画的时序、延迟和重复，而自定义选项则允许在不修改核心库的情况下精细调整动画行为。
有关可用动画类别和效果的信息，请参阅 动画类别。
Animate.css 提供了一些实用类，它们与基础动画类配合使用以控制动画行为。这些实用类利用 CSS 自定义属性（变量）来实现一致且易于自定义的动画。
来源： source/_base.css1-68 docsSource/sections/02-utilities.md1-93
Animate.css 使用三个主要的 CSS 变量来控制动画行为
| CSS 变量 | 默认值 | 目的 |
|---|---|---|
--animate-duration | 1秒 | 控制动画持续时间 |
--animate-delay | 1秒 | 控制动画延迟 |
--animate-repeat | 1 | 控制动画重复次数 |
这些变量可以在两个级别进行自定义
来源： docsSource/sections/01-usage.md64-93 docsSource/sections/02-utilities.md22-34 docsSource/sections/02-utilities.md51-66
延迟类会在动画开始播放前添加一个等待时间，这对于创建动画序列非常有用。
| 类名 | 默认延迟 | 实现 |
|---|---|---|
animate__delay-1s | 1秒 | animation-delay: var(--animate-delay) |
animate__delay-2s | 2秒 | animation-delay: calc(var(--animate-delay) * 2) |
animate__delay-3s | 3秒 | animation-delay: calc(var(--animate-delay) * 3) |
animate__delay-4s | 4秒 | animation-delay: calc(var(--animate-delay) * 4) |
animate__delay-5s | 5秒 | animation-delay: calc(var(--animate-delay) * 5) |
要按比例调整所有延迟时间，请修改 --animate-delay CSS 变量
来源： source/_base.css22-40 docsSource/sections/02-utilities.md5-34
速度类会改变动画播放的速度。它们通过乘以或除以基础持续时间来影响 animation-duration 属性。
| 类名 | 对持续时间的影响 | 实现 |
|---|---|---|
animate__slower | 慢 3 倍 | animation-duration: calc(var(--animate-duration) * 3) |
animate__slow | 慢 2 倍 | animation-duration: calc(var(--animate-duration) * 2) |
animate__fast | 快 20% | animation-duration: calc(var(--animate-duration) * 0.8) |
animate__faster | 快 2 倍 | animation-duration: calc(var(--animate-duration) / 2) |
要全局调整动画速度
您也可以调整特定元素的动画速度
来源： source/_base.css42-56 docsSource/sections/02-utilities.md36-66
重复类控制动画播放的次数。
| 类名 | 重复次数 | 实现 |
|---|---|---|
animate__repeat-1 | 1 次 | animation-iteration-count: var(--animate-repeat) |
animate__repeat-2 | 2 次 | animation-iteration-count: calc(var(--animate-repeat) * 2) |
animate__repeat-3 | 3 次 | animation-iteration-count: calc(var(--animate-repeat) * 3) |
animate__infinite | 无限 | animation-iteration-count: infinite |
要调整基础重复次数
请注意，animate__infinite 不受 --animate-repeat 变量的影响，因为它直接设置了 animation-iteration-count: infinite。
来源： source/_base.css6-20 docsSource/sections/02-utilities.md67-93
实用类在基础 CSS 文件中实现，利用 CSS 计算来维持值之间的比例关系。
您可以组合多个实用类来创建精确计时动画
您可以通过修改 CSS 变量来动态控制动画，例如使用 JavaScript。
来源： docsSource/sections/01-usage.md83-93 docsSource/sections/02-utilities.md39-42
Animate.css 尊重 prefers-reduced-motion 媒体查询，这对于患有前庭障碍或对运动敏感的用户至关重要。启用此偏好设置后：
此实现确保在尊重用户减少动画偏好的同时，保持内容的可用性。
来源： source/_base.css58-68 docsSource/sections/03-best-practices.md38-46
使用实用类和自定义功能时