Animate.css 中文网

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

¥Animate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under.

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

¥Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

安装和使用

¥Installation and Usage

安装

¥Installing

使用 npm 安装：

¥Install with npm:

$ npm install animate.css --save

或者使用 Yarn 安装（这需要配合 Webpack、Parcel 等合适的工具使用。如果你没有使用任何工具打包或打包代码，你可以直接使用以下 CDN 方法）：

¥Or install with Yarn (this will only work with appropriate tooling like Webpack, Parcel, etc. If you are not using any tool for packing or bundling your code, you can simply use the CDN method below):

$ yarn add animate.css

将其导入到你的文件中：

¥Import it into your file:

import 'animate.css';

或者使用 CDN 将其直接添加到你的网页：

¥Or add it directly to your webpage using a CDN:

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

基本用法

¥Basic usage

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

¥After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don't forget the animate__ prefix!):

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

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

¥That's it! You've got a CSS animated element. Super!

动画可以提升界面的用户体验，但请记住，它们也可能妨碍用户！请阅读最佳实践和 gotchas 部分，以尽可能最佳的方式让你的 Web 内容焕发生机。

¥Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the best practices and gotchas sections to bring your web-things to life in the best way possible.

使用 `@keyframes`

¥Using @keyframes

尽管该库提供了一些辅助类（例如 animated 类）来帮助你快速启动，但你也可以直接使用提供的动画 keyframes。这提供了一种灵活的方式，让你在当前项目中使用 Animate.css，而无需重构 HTML 代码。

¥Even though the library provides you a few helper classes like the animated class to get you up running quickly, you can directly use the provided animations keyframes. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.

示例：

¥Example:

.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 属性。更改或不声明它可能会导致意外结果。

¥Be aware that some animations are dependent on the animation-timing property set on the animation's class. Changing or not declaring it might lead to unexpected results.

CSS 自定义属性（CSS 变量）

¥CSS Custom Properties (CSS Variables)

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

¥Since version 4, Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, delay, and iterations. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value globally or locally.

示例：

¥Example:

/* 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 单行代码实现慢动作或延时效果：

¥Custom properties also make it easy to change all your animation's time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:

// 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 动画的浏览器。

¥Even though some aging browsers do not support custom properties, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.

实用工具类

¥Utility Classes

Animate.css 自带一些实用类，方便使用。

¥Animate.css comes packed with a few utility classes to simplify its use.

延迟类

¥Delay classes

你可以直接在元素的 class 属性上添加延迟，如下所示：

¥You can add delays directly on the element's class attribute, just like this:

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

Animate.css 提供以下延迟：

¥Animate.css provides the following delays:

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

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

¥The provided delays are from 1 to 5 seconds. You can customize them setting the --animate-delay property to a longer or a shorter duration:

/* 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;
}

Slow、Slower、Fast 和 Faster 类

¥Slow, slower, fast, and Faster classes

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

¥You can control the speed of the animation by adding these classes, as below:

<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 属性全局或局部自定义动画持续时间。这将影响动画和实用工具类。示例：

¥The animate__animated class has a default speed of 1s. You can also customize the animations duration through the --animate-duration property, globally or locally. This will affect both the animations and the utility classes. Example:

/* 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 属性设置持续时间将遵循这些比率。因此，当你更改全局持续时间时，所有动画都会响应该更改！

¥Notice that some animations have a duration of less than 1 second. As we used the CSS calc() function, setting the duration through the --animation-duration property will respect these ratios. So, when you change the global duration, all the animations will respond to that change!

重复类

¥Repeating classes

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

¥You can control the iteration count of the animation by adding these classes, like below:

<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`	`infinite`

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

¥As with the delay and speed classes, the animate__repeat class is based on the --animate-repeat property and has a default iteration count of 1. You can customize them by setting the --animate-repeat property to a longer or a shorter value:

/* 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 的更改将不会产生任何效果。不要忘记阅读最佳实践部分，以充分利用重复动画。

¥Notice that animate__infinite doesn't use any custom property, and changes to --animate-repeat will have no effect. Don't forget to read the best practices section to make the best use of repeating animations.

最佳实践

¥Best Practices

动画可以极大地提升界面的用户体验，但务必遵循一些准则，切勿过度使用动画，以免降低 Web 内容的用户体验。遵循以下规则应该是一个良好的开端。

¥Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.

有意义的动画

¥Meaningful animations

你应该避免为了动画而动画元素。请记住，动画应该清晰地表达意图。诸如吸引注意力的动画（弹跳、闪烁、脉冲等）应该用于吸引用户的注意力到界面中的特定内容上，而不仅仅是将 "flashiness" 引入其中。

¥You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface and not only as a way to bring "flashiness" to it.

应该使用进入和退出动画来引导界面中正在发生的事情，清楚地表明它正在过渡到新的状态。

¥Entrances and exit animations should be used to orientate what is happening in the interface, clearly signaling that it's transitioning into a new state.

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

¥It doesn't mean that you should avoid adding playfulness to the interface, just be sure that the animations are not getting in the way of your user and that the page's performance is not affected by an exaggerated use of animations.

不要为大型元素添加动画

¥Don't animate large elements

避免使用这种方法，因为它不会给用户带来太多价值，而且可能只会造成混淆。除此之外，动画很可能会变得很垃圾，最终导致糟糕的用户体验。

¥Avoid it as it won't bring much value to the user and will probably only cause confusion. Besides that, there is a good chance that the animations will be junky, culminating in bad UX.

不要为根元素添加动画

¥Don't animate root elements

可以为 <html/> 或 <body/> 标签添加动画，但应避免使用。一些报告指出，这可能会引发一些奇怪的浏览器错误。此外，让整个页面跳转几乎不会为你的用户体验带来良好的价值。如果你确实需要这种效果，请将你的页面封装在一个元素中并为其添加动画，如下所示：

¥Animating the <html/> or <body/> tags is possible, but you should avoid it. There were some reports pointing out that this could trigger some weird browser bugs. Besides, making the whole page bounce would hardly provide good value to your UX. If you indeed need this sort of effect, wrap your page in an element and animate it, like this:

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

应避免使用无限动画

¥Infinite animations should be avoided

尽管 Animate.css 提供了用于重复动画（包括无限动画）的实用类，但你仍应避免使用无限动画。这只会分散用户的注意力，并可能让很多用户感到厌烦。所以，请明智地使用它！

¥Even though Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!

注意你的元素

¥Mind the initial and final state of your elements

所有 Animate.css 动画都包含一个名为 animation-fill-mode 的 CSS 属性，该属性控制元素动画前后的状态。你可以阅读更多关于此处的信息。Animate.css 默认使用 animation-fill-mode: both 协议，但你可以根据需要进行更改。

¥All the Animate.css animations include a CSS property called animation-fill-mode, which controls the states of an element before and after animation. You can read more about it here. Animate.css defaults to animation-fill-mode: both, but you can change it to suit your needs.

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

¥Don't disable the prefers-reduced-motion media query

从 3.7.0 版本开始，Animate.css 支持 prefers-reduced-motion 媒体查询，该查询会根据操作系统对支持浏览器的首选项禁用动画（大多数当前浏览器都支持该查询）。这是一项关键的无障碍功能，永远不应禁用！此功能内置于浏览器中，旨在帮助患有前庭和癫痫症的人。你可以阅读更多关于此处的信息。如果你的 Web 应用需要动画才能运行，请警告用户，但不要禁用该功能。仅使用 CSS 即可轻松完成。这是一个简单的例子：

¥Since version 3.7.0 Animate.css supports the prefers-reduced-motion media query which disables animations based on the OS system's preference on supporting browsers (most current browsers support it). This is a critical accessibility feature and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it here. If your web-thing needs the animations to function, warn users, but don't disable the feature. You can do it easily with CSS only. Here's a simple example:

See the Pen Prefers-reduce-motion media query by Elton Mesquita (@eltonmesquita) on CodePen.

陷阱

你无法为内联元素添加动画

¥You can't animate inline elements

尽管某些浏览器可以对内联元素进行动画处理，但这违反了 CSS 动画规范，并且会在某些浏览器上崩溃或最终停止工作。始终为块级或内联块级元素添加动画效果（网格、弹性容器和子元素也是块级元素）。你可以在为行内元素设置动画时将元素设置为 display: inline-block。

¥Even though some browsers can animate inline elements, this goes against the CSS animation specs and will break on some browsers or eventually cease to work. Always animate block or inline-block level elements (grid and flex containers and children are block-level elements too). You can set an element to display: inline-block when animating an inline-level element.

溢出

¥Overflow

大多数 Animate.css 动画会在屏幕上移动元素，并可能在你的网页上创建滚动条。可以使用 overflow: hidden 属性进行管理。没有关于何时何地使用它的秘诀，但基本思路是在包含动画元素的父级中使用它。何时以及如何使用它取决于你，本指南可以帮助你理解它。

¥Most of the Animate.css animations will move elements across the screen and might create scrollbars on your web-thing. This is manageable using the overflow: hidden property. There's no recipe to when and where to use it, but the basic idea is to use it in the parent holding the animated element. It's up to you to figure out when and how to use it, this guide can help you understand it.

重复间隔

¥Intervals between repeats

遗憾的是，目前纯 CSS 无法实现此操作。你必须使用 JavaScript 才能实现此效果。

¥Unfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result.

与 JavaScript 结合使用

¥Usage with Javascript

将 animate.css 与 JavaScript 结合使用，你可以完成许多其他操作。一个简单的例子：

¥You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:

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

你可以检测动画何时结束：

¥You can detect when an animation ends:

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

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

或更改其持续时间：

¥or change its duration:

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

你还可以使用一个简单的函数来添加和自动移除动画类：

¥You can also use a simple function to add the animations classes and remove them automatically:

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});
  });

使用方法如下：

¥And use it like this:

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

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

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

¥If you had a hard time understanding the previous function, have a look at const, classList, arrow functions, and Promises.

从 v3.x 及以下版本迁移

¥Migration from v3.x and Under

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

¥Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. However, it also comes with a breaking change: we have added a prefix for all of the Animate.css classes - defaulting to animate__ - so a direct migration is impossible.

但不要害怕！虽然默认版本 animate.min.css 带有 animate__ 前缀，但我们也提供不带前缀的 animate.compat.css 文件，与之前的版本（3.x 及以下版本）一样。

¥But fear not! Although the default build, animate.min.css, brings the animate__ prefix we also provide the animate.compat.css file which brings no prefix at all, like the previous versions (3.x and under).

如果你使用了打包器，请更新你的导入：

¥If you're using a bundler, update your import:

从：

¥from:

import 'animate.min.css';

到

¥to

import 'animate.compat.css';

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

¥Notice that depending on your project's configuration, this might change a bit.

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

¥In case of using a CDN, update the link in your HTML:

从：

¥from:

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

到

¥to

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

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

¥In the case of a new project, it's highly recommended to use the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in later versions, we might decide to discontinue the animate.compat.css file.

自定义构建

¥Custom Builds

由于我们没有在 npm 模块中提供构建工具，因此无法从 node_modules 文件夹进行自定义构建。

¥Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.

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

¥Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS with proper fallbacks.

首先，你需要 Node 和所有其他依赖：

¥First of all, you’ll need Node and all other dependencies:

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

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

¥Next, run npm start to compile your custom build. Three files will be generated:

animate.css：原始构建版本，易于阅读，且未进行任何优化

¥animate.css: raw build, easy to read and without any optimization
animate.min.css：已压缩的构建版本，可用于生产环境

¥animate.min.css: minified build ready for production
animate.compat.css：已压缩的构建版本，可用于生产环境，不带类前缀。这仅应作为迁移的简便方法。

¥animate.compat.css: minified build ready for production without class prefix. This should only be used as an easy path for migrations.

例如，如果你只想使用部分“吸引注意力”的动画，只需编辑 ./source/animate.css 文件，删除所有 @import 文件，然后添加你想要使用的动画即可。

¥For example, if you'll only use some of the “attention seekers” animations, simply edit the ./source/animate.css file, delete every @import, and add the ones you want to use.

@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，你的高度优化的构建将在项目根目录生成。

¥Now, just run npm start and your highly optimized build will be generated at the root of the project.

更改默认前缀

¥Changing the default prefix

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

¥It's pretty straight forward to change animate's prefix on your custom build. Change the animateConfig's prefix property in the package.json file and rebuild the library with npm start:

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

然后：

¥then:

$ npm start

非常简单！

¥Easy peasy!

可访问性

¥Accessibility

Animate.css 支持 prefers-reduced-motion 媒体查询协议，以便对运动敏感的用户可以选择不使用动画。在支持的平台上（目前所有主流浏览器和操作系统，包括移动设备），用户可以在其操作系统首选项中选择 "减少动画效果"，它将自动关闭 CSS 过渡效果，无需任何额外操作。

¥Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences, and it will turn off CSS transitions for them without any further work required.

许可和贡献

¥License and Contributing

Animate.css 采用 Hippocratic 许可证协议授权。

¥Animate.css is licensed under the Hippocratic License.

贡献

¥Contributing

请使用 Pull 请求。提交拉取请求只有两条规则：请遵循命名约定（驼峰命名法、分类 [淡入淡出、弹跳等]），并在 pen 中查看已提交动画的演示。最后一点很重要。

¥Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc.]) and let us see a demo of submitted animations in a pen. That last one is important.

行为准则

¥Code of Conduct

本项目及所有参与者均受贡献者契约行为准则的约束。参与此活动，即表示你同意遵守此代码。请将不可接受的行为报告给 [email protected]。

¥This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].

Animate.css

加水即成的 CSS 动画

Attention seekers

Back entrances

Back exits

Bouncing entrances

Bouncing exits

Fading entrances

Fading exits

Flippers

Lightspeed

Rotating entrances

Rotating exits

Specials

Zooming entrances

Zooming exits

Sliding entrances

Sliding exits

安装和使用

安装

基本用法

使用 @keyframes

CSS 自定义属性（CSS 变量）

实用工具类

延迟类

Slow、Slower、Fast 和 Faster 类

重复类

最佳实践

有意义的动画

不要为大型元素添加动画

不要为根元素添加动画

应避免使用无限动画

注意你的元素

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

陷阱

你无法为内联元素添加动画

溢出

重复间隔

与 JavaScript 结合使用

从 v3.x 及以下版本迁移

自定义构建

更改默认前缀

可访问性

许可和贡献

贡献

行为准则

使用 `@keyframes`

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