本文档提供了 Animate.css 库 API 的全面参考，详细介绍了所有可用的动画类、实用类和 CSS 变量。它作为开发人员使用该库实现动画的技术参考。有关安装和基本用法信息，请参阅 概述。
Animate.css 的基础是 animate__animated 基础类，您希望为其添加动画的任何元素都必须应用此类，以及控制动画行为的 CSS 自定义属性（变量）。
来源: animate.css10-22
在 :root 中定义的 CSS 变量设定了默认动画参数
| 可变 | 默认值 | 目的 |
|---|---|---|
--animate-duration | 1秒 | 控制动画持续时间 |
--animate-delay | 1秒 | 控制动画延迟的基础值 |
--animate-repeat | 1 | 控制动画重复次数 |
.animate__animated 类会将这些变量应用到元素上
来源: animate.css10-22
Animate.css 根据动画的视觉效果和目的，将动画组织成逻辑类别
这些动画在不进入或退出视口的情况下吸引注意力。
| 动画类 | 描述 | CSS 实现 |
|---|---|---|
animate__bounce | 使元素上下弹跳 | animate.css190-195 |
animate__flash | 快速交替透明度 | animate.css220-223 |
animate__pulse | 放大和缩小元素 | animate.css257-262 |
animate__rubberBand | 通过各种缩放扭曲元素 | animate.css335-338 |
animate__shakeX | 水平晃动元素 | animate.css387-390 |
animate__shakeY | 垂直晃动元素 | animate.css439-442 |
animate__headShake | 逼真的左右摇头 | animate.css505-510 |
animate__swing | 前后旋转元素 | animate.css563-568 |
animate__tada | 轻微放大和旋转 | animate.css633-636 |
animate__wobble | 左右摇摆 | animate.css710-713 |
animate__jello | 应用倾斜变换以产生果冻效果 | animate.css800-805 |
animate__heartBeat | 模拟心跳双重脉冲 | animate.css858-867 |
这些动画将元素引入视图，根据动画样式分为子类别。
| 动画类 | 描述 |
|---|---|
animate__backInDown | 从顶部进入，放大 |
animate__backInLeft | 从左侧进入，放大 |
animate__backInRight | 从右侧进入，放大 |
animate__backInUp | 从底部进入，放大 |
来源: animate.css868-1036 source/bouncing_entrances/bounceInDown.css1-36 source/bouncing_entrances/bounceInLeft.css1-36 source/bouncing_entrances/bounceInRight.css1-36 source/bouncing_entrances/bounceInUp.css1-36
| 动画类 | 描述 |
|---|---|
animate__bounceIn | 从中心弹入并放大 |
animate__bounceInDown | 从顶部弹入 |
animate__bounceInLeft | 从左侧弹入 |
animate__bounceInRight | 从右侧弹入 |
animate__bounceInUp | 从底部弹入 |
来源: animate.css1206-1380 source/bouncing_entrances/bounceInDown.css1-36 source/bouncing_entrances/bounceInLeft.css1-36 source/bouncing_entrances/bounceInRight.css1-36 source/bouncing_entrances/bounceInUp.css1-36
| 动画类 | 描述 |
|---|---|
animate__zoomIn | 从中心缩放进入 |
animate__zoomInDown | 从顶部缩放进入 |
animate__zoomInLeft | 从左侧缩放进入 |
animate__zoomInRight | 从右侧缩放进入 |
animate__zoomInUp | 从底部缩放进入 |
来源: source/zooming_entrances/zoomInLeft.css1-18 source/zooming_entrances/zoomInRight.css1-18
这些动画将元素移出视图，同样根据动画样式分为子类别。
| 动画类 | 描述 |
|---|---|
animate__bounceOut | 向中心弹出并缩小 |
animate__bounceOutDown | 向底部弹出 |
animate__bounceOutLeft | 向左侧弹出 |
animate__bounceOutRight | 向右侧弹出 |
animate__bounceOutUp | 向上弹出 |
来源： source/bouncing_exits/bounceOutDown.css1-21 source/bouncing_exits/bounceOutLeft.css1-16 source/bouncing_exits/bounceOutRight.css1-16 source/bouncing_exits/bounceOutUp.css1-21
| 动画类 | 描述 |
|---|---|
animate__zoomOut | 放大到中心 |
animate__zoomOutDown | 放大到底部 |
animate__zoomOutLeft | 放大到左侧 |
animate__zoomOutRight | 放大到右侧 |
animate__zoomOutUp | 放大到顶部 |
来源： source/zooming_exits/zoomOutLeft.css1-17 source/zooming_exits/zoomOutRight.css1-17
| 动画类 | 描述 |
|---|---|
animate__flipOutX | 沿 X 轴翻转并淡出 |
animate__flipOutY | 沿 Y 轴翻转并淡出 |
来源： source/flippers/flipOutX.css1-22 source/flippers/flipOutY.css1-22
| 动画类 | 描述 |
|---|---|
animate__hinge | 元素像合页一样掉落 |
animate__jackInTheBox | 从中心旋转并放大进入 |
animate__rollIn | 从左侧滚动进入 |
animate__rollOut | 滚动到右侧 |
来源： source/specials/hinge.css1-30
Animate.css 提供了实用程序类，可在不更改动画类型本身的情况下修改动画行为。
来源： animate.css15-98
这些类修改动画持续时间
| 类 | 描述 | 持续时间 | CSS |
|---|---|---|---|
animate__faster | 默认持续时间的 50% | calc(var(--animate-duration) / 2) | animate.css75-80 |
animate__fast | 默认持续时间的 80% | calc(var(--animate-duration) * 0.8) | animate.css81-86 |
animate__slow | 默认持续时间的 2 倍 | calc(var(--animate-duration) * 2) | animate.css87-92 |
animate__slower | 默认持续时间的 3 倍 | calc(var(--animate-duration) * 3) | animate.css93-98 |
来源： animate.css45-74
这些类在动画开始前添加延迟
| 类 | 描述 | 延迟 | CSS |
|---|---|---|---|
animate__delay-1s | 延迟 1 秒 | var(--animate-delay) | animate.css45-50 |
animate__delay-2s | 延迟 2 秒 | calc(var(--animate-delay) * 2) | animate.css51-56 |
animate__delay-3s | 延迟 3 秒 | calc(var(--animate-delay) * 3) | animate.css57-62 |
animate__delay-4s | 延迟 4 秒 | calc(var(--animate-delay) * 4) | animate.css63-68 |
animate__delay-5s | 延迟 5 秒 | calc(var(--animate-delay) * 5) | animate.css69-74 |
来源： animate.css45-74
这些类控制动画重复的次数
| 类 | 描述 | 重复次数 | CSS |
|---|---|---|---|
animate__repeat-1 | 播放一次（默认） | var(--animate-repeat) | animate.css27-32 |
animate__repeat-2 | 播放两次 | calc(var(--animate-repeat) * 2) | animate.css33-38 |
animate__repeat-3 | 播放三次 | calc(var(--animate-repeat) * 3) | animate.css39-44 |
animate__infinite | 无限重复 | infinite | animate.css23-26 |
来源： animate.css23-44
Animate.css 支持 `prefers-reduced-motion` 媒体查询，确保动画不会给有前庭障碍或对运动敏感的用户带来问题。
当匹配此媒体查询时
您可以使用这些常见模式通过 JavaScript 以编程方式控制动画
来源： animate.css15-22
Animate.css 中的每个动画都遵循一致的模式
例如，`bounceIn` 动画
该模式在整个库中一致使用，使得理解每个动画的实现变得容易。
来源： animate.css1207-1302 source/bouncing_entrances/bounceInDown.css1-36