在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

animate-css/animate.css

菜单

概述

相关源文件

本文档提供了 Animate.css 库的全面技术概述，这是一个跨浏览器 CSS 动画集合，使开发人员能够轻松地为 HTML 元素添加动画效果。本页介绍了库的主要组件、架构和使用模式，为后续页面更详细的文档奠定了基础。

目的与范围

Animate.css 是一个轻量级的、纯 CSS 的动画库，提供了一系列即用型动画。它实现了一个基于类的系统，允许开发人员将各种动画效果应用于 Web 元素，而无需编写自定义 CSS 关键帧或 JavaScript 动画代码。

来源：README.md7 animate.css3-9

核心组件

Animate.css 由几个核心组件组成，它们协同工作以提供其动画功能。

基础动画系统

该库的基础是 animate__animated 类，它设置了所有动画共享的基本动画属性。

  • 动画时长（默认为 1 秒）
  • 填充模式（both）
  • 浏览器前缀以兼容

基础类与特定的动画类结合使用，以创建所需的动画效果。

来源：animate.css15-22

CSS 变量

Animate.css 使用 CSS 自定义属性（变量）来实现动画的轻松自定义。

可变默认值目的
--animate-duration1秒控制动画持续时间
--animate-delay1秒控制动画延迟
--animate-repeat1控制动画重复次数

这些变量可以通过 CSS 进行覆盖，以在不修改库代码的情况下自定义动画。

来源：animate.css10-14

动画类别

该库将动画组织成逻辑类别，代表每个动画的用途或效果。

  1. 吸引注意力动画：在不显著改变元素位置的情况下吸引元素注意力的动画（例如，animate__bounce, animate__flash）
  2. 进入动画：将元素引入视图的动画（例如，animate__fadeIn, animate__slideInUp）
  3. 退出动画：将元素从视图中移除的动画（例如，animate__fadeOut, animate__slideOutDown）
  4. 特殊动画：具有特定效果的独特动画（例如，animate__hinge, animate__jackInTheBox）

来源：animate.css113 animate.css868 animate.css1037 animate.css1206 animate.css3310

工具类

该库提供了修改基本动画行为的实用类。

实用工具类目的
animate__delay-1s 到 animate__delay-5s在动画开始前添加延迟。
animate__fast, animate__faster减小动画时长。
animate__slow, animate__slower增大动画时长。
animate__repeat-1 到 animate__repeat-3控制动画重复的次数。
animate__infinite使动画无限重复。

来源：animate.css23-98

动画架构

Animate.css 中的每个动画都遵循一致的实现模式。

每个动画由以下部分组成：

  1. 关键帧定义：使用 @keyframes 定义动画状态。
  2. 动画类：一个 CSS 类，将关键帧动画应用于元素。
  3. 带前缀的版本：为了浏览器兼容性，包含了 webkit 前缀版本和标准版本。

例如，bounce 动画是通过以下方式实现的：

  • 定义不同时间点的弹跳运动的关键帧。
  • 应用这些关键帧的 .animate__bounce 类。

来源：animate.css114-195

无障碍功能

Animate.css 内置支持 prefers-reduced-motion 媒体查询，确保动画不会给有前庭障碍或对运动敏感的用户带来问题。

此代码有效地为在其操作系统设置中已指明首选减少动画的用户禁用动画。

来源：animate.css99-112 README.md28-30

使用模式

基本用法

要使用 Animate.css，开发人员需要向 HTML 元素添加两个类：

  1. 基础类：animate__animated
  2. 特定的动画类：例如，animate__bounce

HTML 示例

来源：README.md7 animate.css15-22 animate.css190-195

自定义选项

动画可以通过实用类进行自定义，或通过覆盖 CSS 变量进行自定义。

来源：animate.css10-14 animate.css23-98

安装选项

该库可以通过多种方式包含在项目中。

方法命令/语法
npmnpm install animate.css --save
yarnyarn add animate.css
CDN链接到 CDN 托管的 CSS 文件。
下载下载并直接包含 CSS 文件。

来源：README.md11-21

有关 Animate.css 特定方面的更多详细信息，请参阅：