Animate.css中文文档
分类：大杂烩
时间：2024-03-13 21:17
浏览：0
评论：0
Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。
https://github.com/animate-css/animate.css
安装使用
安装
使用 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 动画元素。极好的！
动画可以改善界面的用户体验，但请记住，它们也会妨碍您的用户！请阅读最佳实践和陷阱部分，以尽可能最好的方式让您的网络事物栩栩如生。
使用@keyframes
尽管该库为您提供了一些帮助类，例如animated让您快速运行的类，但您可以直接使用提供的动画keyframes。这提供了一种灵活的方式来将 Animate.css 用于您当前的项目，而无需重构您的 HTML 代码。
例子：
复制代码
.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 非常灵活和可定制。需要更改动画持续时间？只需在全局或本地设置一个新值。
例子：
复制代码
/* 这只会更改此特定动画的持续时间 */
.animate__animated.animate__bounce {
--animate-duration: 2s;
}
/* 这会全局更改所有动画 */
:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}
复制代码
自定义属性还可以轻松地动态更改所有动画的时间受限属性。这意味着您可以使用 javascript one-liner 获得慢动作或延时效果：
// 所有动画都需要两倍的时间才能完成
document.documentElement.style.setProperty('--animate-duration', '2s');
// 所有动画都需要一半的时间才能完成
document.documentElement.style.setProperty('--animate-duration', '.5s');
尽管一些老旧的浏览器不支持自定义属性，但 Animate.css 提供了适当的回退，扩大了对任何支持 CSS 动画的浏览器的支持。
在 GitHub 上编辑
实用程序类
Animate.css 包含一些实用程序类以简化其使用。
延迟课程
您可以直接在元素的 class 属性上添加延迟，就像这样：
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
Animate.css 提供以下延迟：
提供的延迟为 1 到 5 秒。您可以自定义它们，将--animate-delay属性设置为更长或更短的持续时间：
复制代码
/* 所有延迟课程的开始时间将延长2倍 */
:root {
--animate-delay: 2s;
}
/* 所有延迟课程都需要一半的时间才能开始 */
:root {
--animate-delay: 0.5s;
}
复制代码
慢、慢、快和更快的类
您可以通过添加这些类来控制动画的速度，如下所示：
<div class="animate__animated animate__bounce animate__faster">Example</div>
该类animate__animated的默认速度为1s. 您还可以通过--animate-duration属性全局或本地自定义动画持续时间。这将影响动画和实用程序类。例子：
复制代码
/* 所有动画都需要两倍的时间才能完成 */
:root {
--animate-duration: 2s;
}
/* 只有这个元素需要一半的时间才能完成 */
.my-element {
--animate-duration: 0.5s;
}
复制代码
请注意，某些动画的持续时间小于 1 秒。当我们使用 CSScalc()函数时，通过--animation-duration属性设置持续时间将遵循这些比率。因此，当您更改全局持续时间时，所有动画都会响应该更改！
重复课程
您可以通过添加这些类来控制动画的迭代次数，如下所示：
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
与 delay 和 speed 类一样，animate__repeat该类基于--animate-repeat属性，并且默认迭代计数为1. 您可以通过将--animate-repeat属性设置为更长或更短的值来自定义它们：
复制代码
/* 该元素将重复动画2次
最好在本地设置此属性，而不是全局或全局设置
你可能会陷入一个混乱的局面 */
.my-element {
--animate-repeat: 2;
}
复制代码
请注意，animate__infinite不使用任何自定义属性，并且更改--animate-repeat将无效。不要忘记阅读最佳实践部分，以充分利用重复动画。
在 GitHub 上编辑:https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md
最佳实践
动画可以极大地改善界面的用户体验，但重要的是要遵循一些指导方针，不要过度使用它并降低您对 Web 事物的用户体验。遵循以下规则应该提供一个良好的开端。
有意义的动画
您应该避免仅仅为了元素而对其进行动画处理。请记住，动画应该明确意图。应该使用像注意力引导器（反弹、闪光、脉冲等）这样的动画来将用户的注意力吸引到界面中的特殊事物上，而不仅仅是作为一种为它带来“闪光”的方式。
入口和出口动画应该用来定位界面中发生的事情，清楚地表明它正在过渡到一个新的状态。
这并不意味着您应该避免向界面添加趣味性，只是要确保动画不会妨碍您的用户，并且页面的性能不会受到过度使用动画的影响。
不要为大型元素设置动画
避免它，因为它不会给用户带来太多价值，并且可能只会引起混乱。除此之外，动画很有可能会很垃圾，最终导致糟糕的用户体验。
不要为根元素设置动画
动画<html/>或<body/>标签是可能的，但你应该避免它。有一些报告指出这可能会引发一些奇怪的浏览器错误。此外，使整个页面反弹几乎不会为您的用户体验提供良好的价值。如果您确实需要这种效果，请将您的页面包装在一个元素中并为其设置动画，如下所示：
<body>
<main class="animate__animated animate__fadeInLeft">
<!-- Your code -->
</main>
</body>
应避免无限动画
尽管 Animate.css 提供了用于重复动画（包括无限动画）的实用程序类，但您应该避免无限动画。它只会分散您的用户的注意力，并可能会惹恼他们的一部分。所以，明智地使用它！
注意元素的初始和最终状态
所有 Animate.css 动画都包含一个名为 的 CSS 属性animation-fill-mode，它控制动画前后元素的状态。你可以在这里阅读更多关于它的信息。Animate.css 默认为animation-fill-mode: both，但您可以根据需要对其进行更改。
不要禁用prefers-reduced-motion媒体查询
自 3.7.0 版以来，Animate.css 支持prefers-reduced-motion媒体查询，该查询根据操作系统系统对支持浏览器的偏好（大多数当前浏览器支持）禁用动画。这是一个关键的辅助功能，永远不应该被禁用！这是内置在浏览器中的，可以帮助患有前庭和癫痫症的人。你可以在这里阅读更多关于它的信息。如果您的网络事物需要动画功能，请警告用户，但不要禁用该功能。您可以仅使用 CSS 轻松完成。
陷阱
您不能为内联元素设置动画
尽管某些浏览器可以为内联元素设置动画，但这违反了 CSS 动画规范，并且会在某些浏览器上中断或最终停止工作。始终为块级或内联块级元素设置动画（网格和 flex 容器以及子级也是块级元素）。您可以display: inline-block在为内联级元素设置动画时将元素设置为。
溢出
大多数 Animate.css 动画将在屏幕上移动元素，并可能在您的 Web 事物上创建滚动条。这可以使用该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', () => {
// 做点什么
});
复制代码
或更改其持续时间：
const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');
您还可以使用一个简单的函数来添加动画类并自动删除它们：
复制代码
const animateCSS = (element, animation, prefix = 'animate__') =>
// 我们创造承诺并回报它
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// 动画结束后，我们清理类并解决承诺
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});
复制代码
并像这样使用它：
复制代码
animateCSS('.my-element', 'bounce');
// 或
animateCSS('.my-element', 'bounce').then((message) => {
//在动画之后做些什么
});
复制代码
如果您很难理解前面的函数，请查看const、classList、箭头函数和Promises。
在 GitHub 上编辑
从 v3.x 及以下迁移
Animate.css v4 带来了一些改进、改进的动画和新的动画，值得升级。然而，它也带来了一个重大变化：我们为所有 Animate.css 类添加了一个前缀 - 默认为animate__- 所以直接迁移是不可能的。
但不要害怕！虽然默认的 buildanimate.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，您的高度优化的构建将在项目的根目录中生成。
更改默认前缀
在您的自定义构建中更改动画的前缀非常简单。更改文件中的animateConfig'prefix属性并使用以下package.json命令重建库npm start：
/* on Animate.css package.json */
"animateConfig": {
"prefix": "myCustomPrefix__"
},
然后：
$ npm start
十分简单！
在 GitHub 上编辑
可访问性
Animate.css 支持prefers-reduced-motion媒体查询，因此具有运动敏感性的用户可以选择退出动画。在支持的平台上（目前所有主要的浏览器和操作系统，包括移动设备），用户可以在他们的操作系统偏好中选择“减少运动”，它会为他们关闭 CSS 过渡，而无需任何进一步的工作。
在 GitHub 上编辑
核心团队
丹尼尔·伊登 埃尔顿·梅斯基塔 瓦伦冈萨加
Animate.css 创建者 维护者 核心贡献者
在 GitHub 上编辑
许可和贡献
Animate.css 在Hippocratic License下获得许可。
贡献
拉取请求是这里的方式。我们只有两个提交拉取请求的规则：匹配命名约定（camelCase，分类[fades，bounces，等]），让我们看一个在pen中提交的动画演示。最后一个很重要。
行为守则
这个项目和参与其中的每个人都受贡献者契约行为准则的约束。通过参与，您应该遵守此准则。请向animate@eltonmesquita.com报告不可接受的行为。
https://github.com/animate-css/animate.css
安装使用
安装
使用 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 动画元素。极好的！
动画可以改善界面的用户体验，但请记住，它们也会妨碍您的用户！请阅读最佳实践和陷阱部分，以尽可能最好的方式让您的网络事物栩栩如生。
使用@keyframes
尽管该库为您提供了一些帮助类，例如animated让您快速运行的类，但您可以直接使用提供的动画keyframes。这提供了一种灵活的方式来将 Animate.css 用于您当前的项目，而无需重构您的 HTML 代码。
例子：
复制代码
.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 非常灵活和可定制。需要更改动画持续时间？只需在全局或本地设置一个新值。
例子：
复制代码
/* 这只会更改此特定动画的持续时间 */
.animate__animated.animate__bounce {
--animate-duration: 2s;
}
/* 这会全局更改所有动画 */
:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}
复制代码
自定义属性还可以轻松地动态更改所有动画的时间受限属性。这意味着您可以使用 javascript one-liner 获得慢动作或延时效果：
// 所有动画都需要两倍的时间才能完成
document.documentElement.style.setProperty('--animate-duration', '2s');
// 所有动画都需要一半的时间才能完成
document.documentElement.style.setProperty('--animate-duration', '.5s');
尽管一些老旧的浏览器不支持自定义属性，但 Animate.css 提供了适当的回退，扩大了对任何支持 CSS 动画的浏览器的支持。
在 GitHub 上编辑
实用程序类
Animate.css 包含一些实用程序类以简化其使用。
延迟课程
您可以直接在元素的 class 属性上添加延迟，就像这样：
<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 |
复制代码
/* 所有延迟课程的开始时间将延长2倍 */
:root {
--animate-delay: 2s;
}
/* 所有延迟课程都需要一半的时间才能开始 */
: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 |
复制代码
/* 所有动画都需要两倍的时间才能完成 */
:root {
--animate-duration: 2s;
}
/* 只有这个元素需要一半的时间才能完成 */
.my-element {
--animate-duration: 0.5s;
}
复制代码
请注意，某些动画的持续时间小于 1 秒。当我们使用 CSScalc()函数时，通过--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 |
infinite |
复制代码
/* 该元素将重复动画2次
最好在本地设置此属性，而不是全局或全局设置
你可能会陷入一个混乱的局面 */
.my-element {
--animate-repeat: 2;
}
复制代码
请注意，animate__infinite不使用任何自定义属性，并且更改--animate-repeat将无效。不要忘记阅读最佳实践部分，以充分利用重复动画。
在 GitHub 上编辑:https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md
最佳实践
动画可以极大地改善界面的用户体验，但重要的是要遵循一些指导方针，不要过度使用它并降低您对 Web 事物的用户体验。遵循以下规则应该提供一个良好的开端。
有意义的动画
您应该避免仅仅为了元素而对其进行动画处理。请记住，动画应该明确意图。应该使用像注意力引导器（反弹、闪光、脉冲等）这样的动画来将用户的注意力吸引到界面中的特殊事物上，而不仅仅是作为一种为它带来“闪光”的方式。
入口和出口动画应该用来定位界面中发生的事情，清楚地表明它正在过渡到一个新的状态。
这并不意味着您应该避免向界面添加趣味性，只是要确保动画不会妨碍您的用户，并且页面的性能不会受到过度使用动画的影响。
不要为大型元素设置动画
避免它，因为它不会给用户带来太多价值，并且可能只会引起混乱。除此之外，动画很有可能会很垃圾，最终导致糟糕的用户体验。
不要为根元素设置动画
动画<html/>或<body/>标签是可能的，但你应该避免它。有一些报告指出这可能会引发一些奇怪的浏览器错误。此外，使整个页面反弹几乎不会为您的用户体验提供良好的价值。如果您确实需要这种效果，请将您的页面包装在一个元素中并为其设置动画，如下所示：
<body>
<main class="animate__animated animate__fadeInLeft">
<!-- Your code -->
</main>
</body>
应避免无限动画
尽管 Animate.css 提供了用于重复动画（包括无限动画）的实用程序类，但您应该避免无限动画。它只会分散您的用户的注意力，并可能会惹恼他们的一部分。所以，明智地使用它！
注意元素的初始和最终状态
所有 Animate.css 动画都包含一个名为 的 CSS 属性animation-fill-mode，它控制动画前后元素的状态。你可以在这里阅读更多关于它的信息。Animate.css 默认为animation-fill-mode: both，但您可以根据需要对其进行更改。
不要禁用prefers-reduced-motion媒体查询
自 3.7.0 版以来，Animate.css 支持prefers-reduced-motion媒体查询，该查询根据操作系统系统对支持浏览器的偏好（大多数当前浏览器支持）禁用动画。这是一个关键的辅助功能，永远不应该被禁用！这是内置在浏览器中的，可以帮助患有前庭和癫痫症的人。你可以在这里阅读更多关于它的信息。如果您的网络事物需要动画功能，请警告用户，但不要禁用该功能。您可以仅使用 CSS 轻松完成。
陷阱
您不能为内联元素设置动画
尽管某些浏览器可以为内联元素设置动画，但这违反了 CSS 动画规范，并且会在某些浏览器上中断或最终停止工作。始终为块级或内联块级元素设置动画（网格和 flex 容器以及子级也是块级元素）。您可以display: inline-block在为内联级元素设置动画时将元素设置为。
溢出
大多数 Animate.css 动画将在屏幕上移动元素，并可能在您的 Web 事物上创建滚动条。这可以使用该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', () => {
// 做点什么
});
复制代码
或更改其持续时间：
const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');
您还可以使用一个简单的函数来添加动画类并自动删除它们：
复制代码
const animateCSS = (element, animation, prefix = 'animate__') =>
// 我们创造承诺并回报它
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// 动画结束后，我们清理类并解决承诺
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});
复制代码
并像这样使用它：
复制代码
animateCSS('.my-element', 'bounce');
// 或
animateCSS('.my-element', 'bounce').then((message) => {
//在动画之后做些什么
});
复制代码
如果您很难理解前面的函数，请查看const、classList、箭头函数和Promises。
在 GitHub 上编辑
从 v3.x 及以下迁移
Animate.css v4 带来了一些改进、改进的动画和新的动画，值得升级。然而，它也带来了一个重大变化：我们为所有 Animate.css 类添加了一个前缀 - 默认为animate__- 所以直接迁移是不可能的。
但不要害怕！虽然默认的 buildanimate.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，您的高度优化的构建将在项目的根目录中生成。
更改默认前缀
在您的自定义构建中更改动画的前缀非常简单。更改文件中的animateConfig'prefix属性并使用以下package.json命令重建库npm start：
/* on Animate.css package.json */
"animateConfig": {
"prefix": "myCustomPrefix__"
},
然后：
$ npm start
十分简单！
在 GitHub 上编辑
可访问性
Animate.css 支持prefers-reduced-motion媒体查询，因此具有运动敏感性的用户可以选择退出动画。在支持的平台上（目前所有主要的浏览器和操作系统，包括移动设备），用户可以在他们的操作系统偏好中选择“减少运动”，它会为他们关闭 CSS 过渡，而无需任何进一步的工作。
在 GitHub 上编辑
核心团队
丹尼尔·伊登 埃尔顿·梅斯基塔 瓦伦冈萨加
Animate.css 创建者 维护者 核心贡献者
在 GitHub 上编辑
许可和贡献
Animate.css 在Hippocratic License下获得许可。
贡献
拉取请求是这里的方式。我们只有两个提交拉取请求的规则：匹配命名约定（camelCase，分类[fades，bounces，等]），让我们看一个在pen中提交的动画演示。最后一个很重要。
行为守则
这个项目和参与其中的每个人都受贡献者契约行为准则的约束。通过参与，您应该遵守此准则。请向animate@eltonmesquita.com报告不可接受的行为。
1. 本站所有资源来源于用户上传或网络，仅作为参考研究使用，如有侵权请邮件联系站长！
2. 本站积分货币获取途径以及用途的解读，想在本站混的好，请务必认真阅读！
3. 本站强烈打击盗版/破解等有损他人权益和违法作为，请各位会员支持正版！
4. 大杂烩 > Animate.css中文文档
2. 本站积分货币获取途径以及用途的解读，想在本站混的好，请务必认真阅读！
3. 本站强烈打击盗版/破解等有损他人权益和违法作为，请各位会员支持正版！
4. 大杂烩 > Animate.css中文文档
