Animate.css中文文档

2022-04-23 00:00:41 阅读：778 来源： 互联网

标签：__ 动画 element 文档 Animate animate css

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 动画元素。极好的！

动画可以改善界面的用户体验，但请记住，它们也会妨碍您的用户！请阅读最佳实践和陷阱部分，以尽可能最好的方式让您的网络事物栩栩如生。

使用`@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`

提供的延迟为 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__slow`	`2s`
`animate__slower`	`3s`
`animate__fast`	`800ms`
`animate__faster`	`500ms`

该类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>

班级名称	默认迭代次数
`animate__repeat-1`	`1`
`animate__repeat-2`	`2`
`animate__repeat-3`	`3`
`animate__infinite`	`infinite`

与 delay 和 speed 类一样，animate__repeat该类基于--animate-repeat属性，并且默认迭代计数为1. 您可以通过将--animate-repeat属性设置为更长或更短的值来自定义它们：

/* 该元素将重复动画2次

最好在本地设置此属性，而不是全局或全局设置

你可能会陷入一个混乱的局面 */
.my-element {
  --animate-repeat: 2;
}

请注意，animate__infinite不使用任何自定义属性，并且更改--animate-repeat将无效。不要忘记阅读最佳实践部分，以充分利用重复动画。

在 GitHub 上编辑

最佳实践

动画可以极大地改善界面的用户体验，但重要的是要遵循一些指导方针，不要过度使用它并降低您对 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报告不可接受的行为。

标签：__,动画,element,文档,Animate,animate,css
来源： https://www.cnblogs.com/ninama/p/16181111.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Animate.css中文文档

安装使用

安装

基本用法

使用@keyframes

CSS 自定义属性（CSS 变量）

实用程序类

延迟课程

慢、慢、快和更快的类

重复课程

最佳实践

有意义的动画

不要为大型元素设置动画

不要为根元素设置动画

应避免无限动画

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

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

陷阱

您不能为内联元素设置动画

溢出

重复之间的间隔

与 Javascript 一起使用

从 v3.x 及以下迁移

自定义构建

更改默认前缀

可访问性

核心团队

许可和贡献

贡献

行为守则

使用`@keyframes`

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