本文档全面概述了 Animate.css 中的动画类别。它解释了动画如何组织成逻辑分组、每个类别的目的以及它们的实现方式。有关自定义动画时长或延迟的信息，请参阅 工具类和自定义。
Animate.css 将其动画组织成反映其视觉效果和典型用例的语义类别。了解这些类别有助于开发人员根据自己的需求选择合适的动画并理解库的结构。
Animate.css 将动画组织成七个主要类别，每个类别包含多个具有相似特征或目的的动画效果。
来源： animate.css113-867 animate.css868-1036 animate.css1037-1205 animate.css1206-3161
所有动画都遵循一致的命名模式
动画类的命名约定为
animate__ 前缀开头 - 此前缀通过构建过程添加，以避免与其他 CSS 库冲突animate__animated - 所有动画应用持续时间和填充模式属性都必需animate__[category]In[Direction] (例如，animate__fadeInUp)animate__[category]Out[Direction] (例如，animate__fadeOutDown)吸引注意力动画旨在吸引元素注意力，而不改变其进入或退出。这些动画常用于突出需要用户注意的元素，例如通知或行动号召按钮。
| 动画 | 描述 | 主要变换 (Primary Transformation) |
|---|---|---|
animate__bounce | 元素上下弹跳 | translateY 配合 scaleY |
animate__flash | 元素快速闪烁可见与不可见 | 透明度变化 (Opacity changes) |
animate__pulse | 元素通过轻微缩放来跳动 | scale3d |
animate__rubberBand | 元素像橡胶一样拉伸和收缩 | scale3d 配合不同的 x, y 比例 |
animate__shakeX | 元素水平摇晃 | translateX |
animate__shakeY | 元素垂直摇晃 | translateY |
animate__headShake | 元素像摇头说“不”一样摇晃 | translateX 配合 rotateY |
animate__swing | 元素来回摆动 | rotate3d 围绕顶部中心 |
animate__tada | 元素轻微缩放并来回旋转 | scale3d 和 rotate3d |
animate__wobble | 元素左右摇晃 | translate3d 配合 rotate3d |
animate__jello | 元素通过倾斜效果失真 | skewX 和 skewY |
animate__heartBeat | 元素像心跳一样跳动 | scale 配合自定义时序 |
来源： animate.css113-867 source/attention_seekers/bounce.css1-35 source/attention_seekers/rubberBand.css1-34 source/attention_seekers/shake.css1-26 source/attention_seekers/tada.css1-32 source/attention_seekers/flash.css1-17
进入动画控制元素如何出现或进入视口。这些通常用于元素首次加载、通过用户交互显示或在滚动时进入视口。
进入动画组织成几个子类别，每个子类别使用不同的视觉效果。
这些动画使元素以组合的缩放和平移效果进入，仿佛从视口后面出来。
| 动画 | 方向 | 描述 |
|---|---|---|
animate__backInDown | 自上而下 | 元素从上方进入，稍微缩小 |
animate__backInLeft | 自右向左 | 元素从左侧进入，稍微缩小 |
animate__backInRight | 自左向右 | 元素从右侧进入，稍微缩小 |
animate__backInUp | 自下而上 | 元素从下方进入，稍微缩小 |
元素以弹跳效果进入，超过其最终位置后稳定下来。
| 动画 | 方向 | 描述 |
|---|---|---|
animate__bounceIn | 中心外出 | 元素从小到大缩放并伴随弹跳 |
animate__bounceInDown | 自上而下 | 元素从上方弹跳进入 |
animate__bounceInLeft | 自右向左 | 元素从左侧弹跳进入 |
animate__bounceInRight | 自左向右 | 元素从右侧弹跳进入 |
animate__bounceInUp | 自下而上 | 元素从下方弹跳进入 |
来源： animate.css1206-1458 source/bouncing_entrances/bounceIn.css1-43
其他进入动画类型也有类似的模式
animate__fadeIn, animate__fadeInDown 等) - 元素通过透明度过渡淡入animate__flipInX, animate__flipInY) - 元素以 3D 翻转效果进入animate__lightSpeedInRight, animate__lightSpeedInLeft) - 元素以快速倾斜的运动进入animate__rotateIn, animate__rotateInDownLeft 等) - 元素以旋转进入animate__slideInDown, animate__slideInLeft 等) - 元素从不同方向滑动进入animate__zoomIn, animate__zoomInDown 等) - 元素从小尺寸缩放到正常尺寸来源： animate.css2600-3160 source/flippers/flipInX.css1-31 source/flippers/flipInY.css1-31
退出动画控制元素如何消失或离开视口。这些动画通常用于移除元素、导航离开或元素在滚动时离开视口。
退出动画遵循与进入动画相同的模式，但效果相反。
来源： animate.css1037-1205 animate.css4150-4500 source/bouncing_exits/bounceOut.css1-22
退出动画组织到与进入动画相同的子类别中。
animate__backOutDown, animate__backOutLeft 等)animate__bounceOut, animate__bounceOutDown 等)animate__fadeOut, animate__fadeOutDown 等)animate__flipOutX, animate__flipOutY)animate__lightSpeedOutRight, animate__lightSpeedOutLeft)animate__rotateOut, animate__rotateOutDownLeft 等)animate__slideOutDown, animate__slideOutLeft 等)animate__zoomOut, animate__zoomOutDown 等)特殊动画是独特的特效，它们不太适合进入/退出范式，或者足够独特，可以拥有自己的类别。
| 动画 | 描述 | 主要变换 (Primary Transformation) |
|---|---|---|
animate__hinge | 元素像铰链一样落下 | 复杂的旋转、掉落和淡出效果 |
animate__jackInTheBox | 元素像玩具“惊喜盒”一样缩放和旋转进入 | scale3d 和 rotate3d |
animate__rollIn | 元素滚动进入视口 | translate3d 配合 rotate3d |
animate__rollOut | 元素滚动离开视口 | translate3d 配合 rotate3d |
Animate.css 中的每个动画都遵循一致的实现模式。
来源： source/attention_seekers/bounce.css1-35 source/bouncing_entrances/bounceIn.css1-43 source/flippers/flip.css1-35
每个动画由以下部分组成：
一个关键帧定义（使用 @keyframes），它指定了
0%、20%、to 等）scale、translate、rotate 等）一个动画类（例如 animate__bounce），它应用了
所有动画通过基础的 animate__animated 类共享通用属性
主要共享属性包括
--animate-duration CSS 变量自定义）prefers-reduced-motion 媒体查询（第 99 行）来源： animate.css15-22 animate.css99-112
以下是选择适当动画类别的指南
| 类别 | 推荐用途 |
|---|---|
| 吸引注意力 | 吸引已可见元素的注意 |
| 进入动画 | 将新元素引入视图 |
| 退出动画 | 将元素移除视图 |
| 特殊动画 | 创建独特的过渡效果 |
应用动画时
animate__animated 类配对使用