Animate.css

Animate.css v4 带来了重大变更，请在从 v3.x 及以下版本更新之前参考迁移指南。

Animate.css 是一个包含可立即使用的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和吸引注意力的提示。

安装和使用

安装

使用 npm 安装

$ npm install animate.css --save

或使用 Yarn 安装（这将仅在使用 Webpack、Parcel 等适当工具时有效。如果您没有使用任何工具来打包或捆绑您的代码，您可以简单地使用下面的 CDN 方法）

$ yarn add animate.css

将其导入您的文件

import 'animate.css';

或使用 CDN 将其直接添加到您的网页

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

基本用法

安装 Animate.css 后，将类 animate__animated 添加到元素，以及任何动画名称（不要忘记 animate__ 前缀！）。

<h1 class="animate__animated animate__bounce">An animated element</h1>

就是这样！您已经拥有了一个 CSS 动画元素。太棒了！

动画可以改善界面的 UX，但请记住，它们也可能妨碍您的用户！请阅读最佳实践和注意事项部分，以最佳方式将您的 Web 内容变为现实。

使用 `@keyframes`

尽管该库为您提供了一些辅助类，例如 animated 类，可以帮助您快速启动，但您可以直接使用提供的动画 keyframes。这提供了一种灵活的方式，可以在不重构 HTML 代码的情况下，将 Animate.css 与当前项目一起使用。

示例

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

请注意，某些动画依赖于动画类上设置的 animation-timing 属性。更改或不声明它可能会导致意外结果。

CSS 自定义属性（CSS 变量）

从版本 4 开始，Animate.css 使用自定义属性（也称为 CSS 变量）来定义动画的持续时间、延迟和迭代次数。这使得 Animate.css 非常灵活且可定制。需要更改动画持续时间？只需全局或本地设置一个新值即可。

示例

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

自定义属性还可以轻松地动态更改所有动画的受时间约束的属性。这意味着您可以使用 JavaScript 一行代码实现慢动作或延时效果

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

尽管一些老旧的浏览器不支持自定义属性，但 Animate.css 提供了适当的回退，扩展了其对支持 CSS 动画的任何浏览器的支持。

在 GitHub 上编辑此内容

实用程序类

Animate.css 附带了一些实用程序类，以简化其使用。

延迟类

您可以直接在元素的类属性上添加延迟，就像这样

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

Animate.css 提供以下延迟

类名	默认延迟时间
`animate__delay-2s`	`2s`
`animate__delay-3s`	`3s`
`animate__delay-4s`	`4s`
`animate__delay-5s`	`5s`

提供的延迟从 1 到 5 秒。您可以通过将 --animate-delay 属性设置为更长或更短的持续时间来自定义它们

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

慢速、更慢、快速和更快类

您可以通过添加以下类来控制动画的速度，如下所示

<div class="animate__animated animate__bounce animate__faster">Example</div>

类名	默认速度时间
`animate__slow`	`2s`
`animate__slower`	`3s`
`animate__fast`	`800ms`
`animate__faster`	`500ms`

animate__animated 类的默认速度为 1s。您还可以通过 --animate-duration 属性全局或本地自定义动画持续时间。这将影响动画和实用程序类。示例

/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;
}

/* Only this element will take half the time to finish */
.my-element {
  --animate-duration: 0.5s;
}

请注意，某些动画的持续时间少于 1 秒。由于我们使用了 CSS calc() 函数，因此通过 --animation-duration 属性设置持续时间将尊重这些比率。因此，当您更改全局持续时间时，所有动画都将响应该更改！

重复类

您可以通过添加以下类来控制动画的迭代次数，如下所示

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

类名	默认迭代次数
`animate__repeat-1`	`1`
`animate__repeat-2`	`2`
`animate__repeat-3`	`3`
`animate__infinite`	`无限`

与延迟和速度类一样，animate__repeat 类基于 --animate-repeat 属性，默认迭代次数为 1。您可以通过将 --animate-repeat 属性设置为更长或更短的值来自定义它们

/* The element will repeat the animation 2x
   It's better to set this property locally and not globally or
   you might end up with a messy situation */
.my-element {
  --animate-repeat: 2;
}

请注意，animate__infinite 不使用任何自定义属性，对 --animate-repeat 的更改将不会产生任何影响。请务必阅读最佳实践部分，以充分利用重复动画。

在 GitHub 上编辑此内容

最佳实践

动画可以极大地改善界面的 UX，但重要的是遵循一些准则，不要过度使用它，以免降低您的 Web 内容的用户体验。遵循以下规则应该是一个良好的开端。

有意义的动画

您应该避免仅仅为了动画而动画元素。请记住，动画应该使意图清晰。像吸引眼球的动画（bounce、flash、pulse 等）应该用于将用户的注意力吸引到界面中的某些特殊内容，而不仅仅是作为一种为界面带来“闪光”的方式。

进入和退出动画应该用于指示界面中正在发生的事情，清楚地表明它正在过渡到一个新的状态。

这并不意味着您应该避免为界面添加趣味性，只是要确保动画不会妨碍您的用户，并且页面性能不会因过度使用动画而受到影响。

不要动画大型元素

避免这样做，因为它不会给用户带来太多价值，并且可能会造成混淆。除此之外，动画很可能很糟糕，最终导致糟糕的 UX。

不要动画根元素

动画 <html/> 或 <body/> 标签是可能的，但您应该避免这样做。有一些报告指出，这可能会触发一些奇怪的浏览器错误。此外，让整个页面弹跳几乎不会给您的 UX 带来任何价值。如果您确实需要这种效果，请将您的页面包装在一个元素中并对其进行动画处理，例如

<body>
  <main class="animate__animated animate__fadeInLeft">
    <!-- Your code -->
  </main>
</body>

应该避免无限动画

尽管 Animate.css 提供了用于重复动画的实用程序类，包括无限类，但您应该避免无限动画。它只会分散用户的注意力，并且可能会惹恼一部分用户。因此，请明智地使用它！

注意元素的初始状态和最终状态

所有 Animate.css 动画都包含一个名为 animation-fill-mode 的 CSS 属性，它控制元素在动画之前和之后的状态。您可以在此处阅读有关它的更多信息。Animate.css 默认设置为 animation-fill-mode: both，但您可以根据需要更改它。

不要禁用 `prefers-reduced-motion` 媒体查询

从版本 3.7.0 开始，Animate.css 支持 prefers-reduced-motion 媒体查询，该查询根据支持浏览器的操作系统系统偏好禁用动画（大多数当前浏览器都支持它）。这是一个重要的可访问性功能，绝不应该禁用！这是内置在浏览器中以帮助患有前庭和癫痫疾病的人。您可以在此处阅读有关它的更多信息。如果您的 Web 内容需要动画才能正常运行，请警告用户，但不要禁用该功能。您只需使用 CSS 即可轻松实现。以下是一个简单的示例

查看 CodePen 上 Elton Mesquita 的 Prefers-reduce-motion 媒体查询 (@eltonmesquita)。

注意事项

您无法动画化内联元素

尽管某些浏览器可以对内联元素进行动画处理，但这违反了 CSS 动画规范，并且会导致某些浏览器出现故障或最终停止工作。始终对块级或内联块级元素（网格和弹性容器及其子元素也是块级元素）进行动画处理。在对内联级元素进行动画处理时，可以将元素设置为 `display: inline-block`。

溢出

大多数 Animate.css 动画会将元素移动到屏幕上，并且可能会在您的网页上创建滚动条。可以使用 `overflow: hidden` 属性来管理此问题。没有关于何时何地使用它的固定方案，但基本思想是在包含动画元素的父元素中使用它。您需要自行决定何时以及如何使用它，本指南可以帮助您理解它。

重复之间的间隔

不幸的是，目前无法使用纯 CSS 实现此功能。您需要使用 Javascript 来实现此效果。

在 GitHub 上编辑此内容

与 Javascript 结合使用

将 Animate.css 与 Javascript 结合使用，可以实现许多其他功能。以下是一个简单的示例

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

您可以检测动画何时结束

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

element.addEventListener('animationend', () => {
  // do something
});

或更改其持续时间

const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');

您还可以使用一个简单的函数来添加动画类并自动将其删除

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

并像这样使用它

animateCSS('.my-element', 'bounce');

// or
animateCSS('.my-element', 'bounce').then((message) => {
  // Do something after the animation
});

如果您难以理解之前的函数，请查看 const、classList、箭头函数和 Promise。

在 GitHub 上编辑此内容

从 v3.x 及更低版本迁移

Animate.css v4 带来了许多改进，包括改进的动画和新的动画，因此值得升级。但是，它也带来了一项重大更改：我们为所有 Animate.css 类添加了一个前缀，默认值为 `animate__`，因此无法直接迁移。

但不要担心！虽然默认构建 `animate.min.css` 带来了 `animate__` 前缀，但我们也提供了 `animate.compat.css` 文件，该文件完全没有前缀，与之前的版本（3.x 及更低版本）相同。

如果您使用的是捆绑器，请更新您的导入

从

import 'animate.min.css';

到

import 'animate.compat.css';

请注意，根据您的项目配置，这可能会有所不同。

如果使用的是 CDN，请更新 HTML 中的链接

从

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
  />
</head>

到

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
  />
</head>

对于新项目，强烈建议使用默认的前缀版本，因为它可以确保您的类不会与项目中的其他类冲突。此外，在以后的版本中，我们可能会决定停止使用 `animate.compat.css` 文件。

在 GitHub 上编辑此内容

自定义构建

无法从 node_modules 文件夹创建自定义构建，因为我们不会在 npm 模块中提供构建工具。

Animate.css 由 npm、postcss + postcss-preset-env 提供支持，这意味着您可以使用适当的回退轻松创建自定义构建，并使用未来的 CSS。

首先，您需要 Node 和所有其他依赖项

$ git clone https://github.com/animate-css/animate.css.git
$ cd animate.css
$ npm install

接下来，运行 `npm start` 来编译您的自定义构建。将生成三个文件

animate.css：原始构建，易于阅读，没有任何优化
animate.min.css：已缩小的构建，适用于生产环境
animate.compat.css：已缩小的构建，适用于生产环境，**没有类前缀**。这仅应作为迁移的简便方法使用。

例如，如果您只使用一些“注意力吸引者”动画，只需编辑 `./source/animate.css` 文件，删除所有 `@import` 和您要使用的动画。

@import 'attention_seekers/bounce.css';
@import 'attention_seekers/flash.css';
@import 'attention_seekers/pulse.css';
@import 'attention_seekers/rubberBand.css';
@import 'attention_seekers/shake.css';
@import 'attention_seekers/headShake.css';
@import 'attention_seekers/swing.css';
@import 'attention_seekers/tada.css';
@import 'attention_seekers/wobble.css';
@import 'attention_seekers/jello.css';
@import 'attention_seekers/heartBeat.css';

现在，只需运行 `npm start`，您高度优化的构建将在项目的根目录中生成。

更改默认前缀

在您的自定义构建中更改 animate 的前缀非常简单。更改 `package.json` 文件中 `animateConfig` 的 `prefix` 属性，并使用 `npm start` 重新构建库

/* on Animate.css package.json */
"animateConfig": {
  "prefix": "myCustomPrefix__"
},

然后

$ npm start

非常简单！

在 GitHub 上编辑此内容

可访问性

Animate.css 支持 prefers-reduced-motion 媒体查询，以便运动敏感的用户可以选择退出动画。在支持的平台（目前包括所有主要浏览器和操作系统，包括移动设备）上，用户可以在其操作系统首选项中选择“减少运动”，它将为他们关闭 CSS 过渡，无需任何其他操作。

在 GitHub 上编辑此内容

核心团队


Daniel Eden	Elton Mesquita	Waren Gonzaga
Animate.css 创建者	维护者	核心贡献者

在 GitHub 上编辑此内容

许可证和贡献

Animate.css 采用希波克拉底许可证许可。

贡献

拉取请求是首选方式。我们只有两个提交拉取请求的规则：匹配命名约定（驼峰式命名法，分类 [淡入淡出、弹跳等]）并让我们在 pen 中看到提交的动画演示。**最后一个很重要**。

行为准则

本项目以及所有参与者受贡献者公约行为准则约束。参与即表示您同意遵守此准则。请将不可接受的行为报告给 [email protected]。

在 GitHub 上编辑此内容

只需添加水就能实现的 CSS 动画

吸引眼球

从后面进入

从后面退出

弹跳进入

弹跳退出

淡入进入

淡出退出

翻转

光速

旋转进入

旋转退出

特殊效果

缩放进入

缩放退出

滑动进入

滑动退出

安装和使用

安装

基本用法

使用 @keyframes

CSS 自定义属性（CSS 变量）

实用程序类

延迟类

慢速、更慢、快速和更快类

重复类

最佳实践

有意义的动画

不要动画大型元素

不要动画根元素

应该避免无限动画

注意元素的初始状态和最终状态

不要禁用 prefers-reduced-motion 媒体查询

注意事项

您无法动画化内联元素

溢出

重复之间的间隔

与 Javascript 结合使用

从 v3.x 及更低版本迁移

自定义构建

更改默认前缀

可访问性

核心团队

许可证和贡献

贡献

行为准则

使用 `@keyframes`

不要禁用 `prefers-reduced-motion` 媒体查询