使用密钥帧在CSS中进行动画需要时间和精力。这是因为在大多数情况下很难实现。让我向您介绍一个JavaScript库，名为Animate在scroll （AOS）上。 AOS通过将属性添加到您的HTML标签中使动画变得容易。

介绍

拥有一个网站是必须拥有在线形象的任何人来说。当您拥有该网站时，您可以在互联网上告诉人们他们的所作所为或他们提供的服务。每个网站所有者的喜悦是让人们发现他们的网站有趣。这将使网站访问者花费更多的时间并在您的网站上阅读更多内容。

这样做的方法之一是在您的网站上添加友好的动画而不是过度使用它们。大多数开发人员不会为网站进行动画动画，因为它需要时间且压力很大。使用Animate on Scroll，现在比以前更容易动画网站。在本文中，我将教您如何使用 aos 。

先决条件

HTML和CSS的基本知识。
熟悉JavaScript和JavaScript概念，例如对象。
熟悉运行代码的集成开发环境（IDE）和终端/命令行。

在滚动（at）上动画

AOS 是一个JavaScript库，为您的网站提供20多个预定义的动画。要将这些动画添加到您的网站上，您需要在网站上安装库。

安装

有两种安装 aos 的方法：

基本安装：通过在head标签中添加外部样式表来安装库。

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

在</body>标签关闭之前添加脚本并初始化 aos 。

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

软件包管理器：使用Yarn yarn add aos@next或NPM npm install --save aos@next安装软件包，然后导入脚本和样式并初始化 aos 。
```
import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();
```

如何使用它

基本用法

将动画添加到您的HTML内容很简单。为此，您将添加data-aos属性，以使您的html效果。

<div data-aos="fade-in"></div>

另外，您可以在所有HTML标签中使用 aos 属性。

在下面使用一些预定义 AOS 动画：

您可以在AOS website上检查其余的可用动画。

提前使用

通过您想设置自己的设置，例如持续时间，延迟和偏移，将 AOS 动画添加到您的网站上。您可以通过添加要编辑的属性来执行此操作，

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center">
  </div>

在下面使用了一些预定义的AOS动画的高级用法：

您可以在下表中检查其余的可用动画。

属性	描述	示例值	默认值
`data-aos-offset`	调整偏移量以迟早开始动画（PX）。	200	120
`data-aos-duration`	动画运行时（MS）。	600	400
`data-aos-easing`	以多种方式选择元素宽松功能的定时函数。	sine in sine	舒适
`data-aos-delay`	动画延迟（MS）。	300	0
`data-aos-anchor`	偏移值将用于锚元素而不是默认设置值。	#Selector	null
`data-aos-anchor-placement`	屏幕上应该处于锚点位置以启动动画的元素。	顶级中心	顶部
`data-aos-once`	选择动画是否应仅播放一次或每次向上或向下滚动到元素。	true	false
`disable`	AOS不应发挥作用的条件。	移动	false

全局设置

如果您在动画中使用了相同的高级属性，则将这些属性设置为另一个属性将花费更多的时间，并且您还将编写更多的代码行。我们将使用此设置为此提供解决方案。

为此，将选项对象添加到init()函数，例如：

  <script>
    AOS.init({
      offset: 200,
      duration: 600,
      easing: 'ease-in-sine',
      delay: 100,
    });
  </script>

制作自己的动画

，如果我们不喜欢AOS给我们的默认动画，我们可以使用AOS创建新动画。

为此，我们将在两个状态下工作

动画之前
动画之后

/* Before animation*/
[data-aos="new-animation"] {
  transform: rotate(300deg) scale(0.3);
  opacity: 0;
  transition-property: transform, opacity;
}
/* After animation */
[data-aos="new-animation"].aos-animate {
  transform: rotate(0) scale(1);
  opacity: 1;
}

要使用我们新创建的动画，我们将将属性data-aos="new-animation"添加到我们要动画的元素中。

请参阅下面的我们新创建的动画。

结论

在本文中，我们讨论了scroll（AOS）的动画，这是动画的JavaScript库之一。我们分解了如何使用此库来对我们的网站进行动画动画的所有细节。我们还谈论如何制作自己的动画。

我们现在可以对网站进行动画动画，而不必担心默认的CSS在网站前端进行动画元素的方式所带来的压力。

介绍