动画系统架构

概述

Animate.css 动画系统提供了一种基于类的 CSS 动画应用方法。该系统围绕一个基础类、多个动画关键帧定义和用于自定义的实用类构建。

来源：animate.css10-14 animate.css15-22 animate.css99-112

基础动画结构

动画系统基于一个基础类（animate__animated），它为元素应用通用动画属性，并结合定义动画样式的特定动画类。

核心类和变量

系统根目录下有控制动画行为的 CSS 自定义属性（变量）

来源：animate.css10-14 animate.css15-22 source/_base.css1-4

基础类至关重要，因为它

设置动画时长（使用 CSS 变量）
设置 animation-fill-mode: both，以确保动画在执行前后都应用样式
为所有动画类提供基础

动画应用模式

要为元素添加动画，需要两个类

基础类（animate__animated）
至少一个动画类（例如，animate__bounce、animate__fadeIn）

来源：animate.css15-22 animate.css190-195 animate.css1825-1828

关键帧定义系统

库中的每个动画都使用 CSS @keyframes 规则来描述动画序列。然后，动画类会引用这些规则。

来源：animate.css114-151 animate.css152-189 animate.css190-195

每个动画遵循此模式

带有厂商前缀的 @-webkit-keyframes 定义
标准的 @keyframes 定义
引用关键帧名称的动画类

例如，“bounce”动画

定义在不同时间点具有特定变换状态的关键帧
在 animate__bounce 类中引用这些关键帧
设置特定于动画的属性（例如 transform-origin）

库中所有动画都存在类似的模式，每个动画类引用其对应的关键帧定义。

动画分类结构

库中的动画被组织成有意义的类别，形成逻辑结构

来源：animate.css113 animate.css868 animate.css1037 animate.css1206 animate.css1615 animate.css1806 animate.css2181 animate.css2524

这种分类通过代码中的注释将动画部分分开，使得查找和维护相关动画更加容易。

动画自定义系统

动画系统提供了几个修改动画行为的实用类

计时控制类

来源：animate.css75-97 source/_base.css42-56

延迟和重复类

来源：animate.css23-74 source/_base.css10-40

自定义系统使用 CSS 变量和 calc() 函数进行调整，同时保持一致的设计模式。

无障碍性考量

动画系统通过尊重用户的运动偏好来实现可访问性最佳实践

来源： animate.css99-112 source/_base.css58-68

当用户通过系统设置偏好减弱动画时

所有动画持续时间将减少到 1ms
动画迭代次数限制为 1
退出动画将保持其最终状态（opacity: 0），不进行动画处理

这确保了有前庭障碍或对运动敏感的用户仍然可以使用带有 Animate.css 的网站，而不会产生负面影响。

实现细节

元素动画生命周期

来源： animate.css15-22 animate.css23-97

动画系统遵循一个简单的应用模式，其中

基础类为元素准备动画
特定的动画类触发动画
可选的辅助类修改动画行为

供应商前缀策略

为确保跨浏览器兼容性，动画系统对所有动画属性都实现了供应商前缀

来源： animate.css16-21

每个动画属性和关键帧定义都包含标准和 webkit 前缀版本，以最大限度地提高跨浏览器兼容性。

与 DOM 集成

为了使用动画系统，开发人员直接或通过 JavaScript 将类应用于 HTML 元素

该系统被设计为一个纯 CSS 解决方案，对于基本功能无需 JavaScript，但可以通过 JavaScript 进行增强，以实现动态应用和事件处理。

总结

Animate.css 动画系统架构建立在以下基础上：

一个设置通用属性的基础动画类
用于自定义的 CSS 变量
定义动画序列的关键帧定义
引用这些关键帧的动画类
用于控制时间、延迟和重复的实用类
对偏好减弱动画的用户的可访问性考虑

这种架构为 Web 动画提供了一种灵活、可维护且易于访问的方法。