其他分享
首页 > 其他分享> > Animate.css中文文档

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以编译您的自定义构建。将生成三个文件：

例如，如果您只使用一些“注意寻求者”动画，只需编辑./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