CSS Animation Delay

Animate.css 是一组预制的跨浏览器动画，可用于您的在线应用程序。它非常适合吸引人的提示、滑块、主页和强调。

安装和使用

使用 npm 进行安装

或者，使用 Yarn 进行安装（这需要合适的工具，例如 Webpack、Parcel 等）。如果您不使用任何工具来打包或组合您的代码，则可以使用下面的 CDN 方法

将其导入到您的文件中

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

负的 animation-delay 数字是另一种选择。与“0s”一样，负值表示动画将在应用后立即开始播放，但它也会自动向前推进延迟的绝对值。

这给人的印象是动画已经部分开始，因为它在过去指定的某个时间开始。如果您将 animation-delay 值设置为“-2s”，动画将在应用时立即开始，但看起来它是在两秒前开始的。

基本用法

安装 Animate.css 后，将任何动画名称应用于一个元素和 animate__animated 类（不要忘记 animate__ 前缀！)

就是这样！一个 CSS 动画元素就位。太棒了！

// 虽然动画可以增强界面的用户体验，但请注意，它们也可能阻碍用户的进度！为确保您的在线项目尽可能顺利地进行，请阅读最佳实践和注意事项部分。

使用 @keyframes

您可以使用库提供的动画关键帧，即使它提供了一些便捷类，例如 animated 类，可以帮助您快速入门。这提供了一种灵活的方法，可以将 Animate.css 集成到您正在进行的项目中，而无需修改 HTML 代码。

示例

注意：在动画类的 animation-timing 属性会影响某些动画。修改它或不显示它可能会导致意外后果。

CSS 自定义属性（CSS 变量）

从 4.x 版本开始，动画的长度、延迟和迭代次数在 Animate.css 中使用自定义属性（通常称为 CSS 变量）定义。因此，Animate.css 非常灵活且可定制。您需要更改动画的持续时间吗？本地或全局更改值。

示例

此外，自定义属性可以轻松地对动画中所有有时间限制的属性进行即时更改。这意味着一行 JavaScript 代码就可以实现慢动作或延时效果

Animate.css 提供了一个合适的后备方案，将兼容性扩展到支持 CSS 动画的每个浏览器，即使某些旧版浏览器不支持特殊属性。

实用类

CSS 包含一些实用类，以便于使用。

延迟类

可以按照下面的方式将延迟直接添加到元素的 class 属性中

Animate.css 提供以下延迟

类名和默认延迟时间为 animate__delay-2s~2s, animate__delay-3s~3s, animate__delay-4s~4s, and animate__delay-5s~5s。

延迟从一秒到五秒不等。通过更改 --animate-delay 属性的长度，您可以个性化它们

慢、更慢、快、更快类

通过添加以下类，您可以调整动画的速度

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

animate__animated 类的速度默认设置为 1s。--animate-length 参数允许您在本地和全局更改动画的持续时间。这将影响实用类和动画。例如

您会看到有些动画持续一小段时间。当我们使用 CSS calc() 方法指定持续时间时，将保留这些比例。因此，所有动画都将对全局持续时间的变化做出响应！

重复类

通过添加以下类，您可以调整动画的迭代次数

类名和默认迭代次数 animate__repeat-1 1 animate__repeat-2 2 animate__repeat-3 3 animate__infinite infinite

与延迟和速度类一样，animate__repeat 类具有默认迭代次数 1，并基于 --animate-repeat 参数。通过将 --animate-repeat 参数更改为不同的值，您可以修改它们

// 元素将重复动画两次。

// 理想情况下，您应该本地设置此属性，而不是全局设置，以避免复杂的情况*/

Animate__infinite 不使用任何自定义属性，因此对 --animate-repeat 的修改不会影响结果。要充分利用重复动画，请记住阅读最佳实践部分。

最佳实践

动画可以极大地增强界面的用户体验（UX），但重要的是要遵守某些规则，保持适度，并使您的在线产品更具用户友好性。以下指南应该能让您开始。

1. 有意义的动画

不应仅仅为了展示而为元素添加动画。请记住，动画应该传达清晰的信息。吸引注意力的动画，例如 bounce、flash、pulse 等，应该用于突出界面的某个特定功能，而不仅仅是为其增加“花哨感”。

应使用进入和退出动画来帮助用户浏览界面，并识别其何时变为新状态。

这并不意味着您应该避免在 UI 中加入一些幽默感；相反，请确保动画不会阻碍用户体验，也不会在过度使用时对页面性能产生负面影响。

2. 不要动画大型元素

避免这样做，因为它很可能只会让客户感到困惑，并且没有任何好处。此外，动画效果糟糕并产生糟糕用户体验的可能性很高。

3. 不要动画根元素

尽管这是可能的，但您应该避免为 或 标签添加动画。有报告表明这可能会导致一些奇怪的浏览器问题。此外，使整个页面反弹几乎不会改善用户体验。如果您确实想要这种效果，请使用一个元素，并在您的网站上对其进行动画处理，如下例所示

4. 避免无限动画

即使 Animate.css 提供了用于重复动画的实用类，其中一个就是 infinite，您也应该避免使用无限动画。它只会分散用户的注意力，有些人可能会感到恼火。因此，使用时要小心！

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

animation-fill-mode CSS 属性控制元素在动画之前和之后的开始状态。它包含在所有 Animate.css 动画中。您可以在此处阅读更多相关信息。您可以根据需要修改 animation-fill-mode: both，但这已经是默认设置。

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

自 3.7.0 版本以来，Animate.css 已支持 prefers-reduced-motion 媒体查询。此查询会根据兼容浏览器（许多现代浏览器都支持它）的操作系统选择来关闭动画。此重要的可访问性功能绝不能禁用！浏览器内置此功能是为了帮助患有前庭和癫痫问题用户。在此处阅读更多相关信息。如果您的在线应用程序需要动画才能正常运行，请告知用户，但不要禁用该功能。仅使用 CSS 即可轻松实现。这是一个简单的示例

注意事项

1. 您无法为内联元素添加动画。

虽然内联元素可以在某些浏览器中动画，但这违反了 CSS 动画规范，在某些浏览器中会中断，并最终停止工作。块级或内联块级元素应始终添加动画（子元素、flex 容器和 grid 也是块级元素）。在为内联级元素添加动画时，您可以选择将元素设置为 display: inline-block。

2. Overflow（溢出）

Animate.css 动画大部分情况下会移动对象，甚至可能在您的网站上添加滚动条。这可以通过 overflow: hidden 属性来控制。总的来说，是在包含动画元素的父级中使用它；没有固定的规则说明何时何地应用它。您需要确定何时以及如何使用它；本指南将帮助您做到这一点。

3. 重复之间的间隔

遗憾的是，纯 CSS 目前无法实现这一点。必须使用 JavaScript。

4. 与 Javascript 的结合使用

与 Javascript 结合使用时，animate.css 可以用于更多任务。一个简单的例子是

动画结束后可以检测到

或更改其持续时间

您也可以使用以下简单函数自动添加和删除动画类

如果前面的函数需要帮助理解，请考虑查看 const、classList、箭头函数和 promises。

从 v3.x 及更早版本迁移

升级是值得的，因为从 v3.x 到 Animate.css v4 的转换带来了一些增强，包括新的和改进的动画。它还包含一个破坏性更改：所有 Animate.css 类现在都包含一个前缀（默认为 animate__），这使得直接迁移不可行。

我们提供了 animate.compat.css 文件，它不带任何前缀，就像早期版本（3.x 及以下）一样，即使默认构建 animate.min.css 带有 animate__ 前缀。

如果您使用打包器，请更新您的导入

From

to

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

如果您使用的是 CDN，请务必更新您的 HTML 链接。

强烈建议您为新项目使用默认带前缀的版本，因为这样可以确保很少有类与您的工作发生冲突。此外，我们可能会选择在后续版本中删除 animate.compat.css 文件。

修改默认前缀

更改自定义构建上的动画前缀非常简单。修改 package.json 文件中的 animateConfig 的 prefix 属性，然后使用 npm start 构建库

可访问性

对运动敏感的用户可以使用 prefers-reduced-motion 媒体查询选择不显示动画，Animate.css 支持此查询。用户还可以选择其操作系统选项中的“减少运动”以在兼容的系统上自动关闭 CSS 过渡（目前，所有主流浏览器和操作系统，包括移动设备）。