极客笔记在HTML、CSS和AOS.js中添加滚动动画
AOS.js（滚动动画）是一个提供动画效果的JavaScript库，通过在要添加动画的
标签中更改类名，可以轻松添加大量动画效果。虽然市面上有不同的动画JavaScript库，但AOS.js可能是最简单的。
在本教程中，我们将通过不同的示例探讨可在AOS.js中使用的不同类型的动画效果。
我们将首先探讨的是渐变动画效果。在此之前，我们首先需要确保在我们的代码中存在aos.css和aos.js，并通过CDN链接获得它们。
只需将以下代码片段粘贴到您的HTML代码的
标签末尾即可。<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
以上代码片段将有助于获取 css 文件，并且为了获取 js 文件，我们需要将下面所示的CDN代码片段粘贴到我们的HTML代码的标签末尾。
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
一旦我们在HTML代码中添加了上述两个代码片段，我们就可以在我们的代码中使用AOS了。
使用AOS.js实现淡入淡出动画
淡入淡出动画模拟了淡入淡出行为，并且总共有8种不同的动画效果。它们是：
- fade-up
-
fade-down
-
fade-left
-
fade-right
-
fade-up-left
-
fade-up-right
-
fade-down-left
-
fade-down-right
现在让我们在一个简单的HTML-CSS示例中逐个使用它们。
下面的代码片段是唯一一个我们将为上述所有淡入淡出动画进行更改的部分。
<div id="main">
<div data-aos="fade-up">Something up!</div>
</div>
在上面的代码中，我们将值传递给 data-aos 属性作为”fade-up”，在所有淡入淡出的情况下，只有这个值会改变。 index.html 现在，让我们考虑下面的 index.html 文件，在这个文件中，我们将进行”fade-up”动画。 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="fade-up">Something Up!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
当你在浏览器中运行上述代码时，你应该会看到一个带有文本“Something Up!”的向上淡入动画的div元素。 类似地，如果我们想要进行向下淡出的动画，我们可以使用代码片段中显示的<div>。
<div id="main">
<div data-aos="fade-down">Something down!</div>
</div>
我们只需要将index.html文件中的<div>替换为上面的div，就可以得到淡出动画。
对于 淡入 ，代码段如下所示。
<div id="main">
<div data-aos="fade-left">Something left!</div>
</div>
对于 Fade-right ，代码段如下所示。
<div id="main">
<div data-aos="fade-right">Something right!</div>
</div>
对于 Fade-up-left ，代码段如下所示。
<div id="main">
<div data-aos="fade-up-left">Something up left!</div>
</div>
对于 Fade-up-right ，代码片段如下所示。
<div id="main">
<div data-aos="fade-up-right">Something up right!</div>
</div>
对于 Fade-down-left ，以下是代码片段。
<div id="main">
<div data-aos="fade-down-left">Something down left!</div>
</div>
对于 Fade-down-right ，代码片段如下所示。
<div id="main">
<div data-aos="fade-down-right">Something down right!</div>
</div>
有了这个，我们可以得出结论，在AOS中，淡入淡出动画已经完成。
使用AOS.js进行翻转动画
翻转动画模拟了翻转行为，总共有4种不同的动画效果可以实现。它们分别是-
- flip-up
-
flip-down
-
flip-left
-
flip-right
现在让我们逐个在一个简单的HTML-CSS示例中使用它们。
index.html
让我们考虑以下 index.html 文件，我们将在其中进行 “flip-up” 动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="flip-up">Flip Up!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
当你在浏览器中运行上面的代码时，你应该看到一个向上翻转的动画，其文本为“Flip Up!”。
类似地，如果我们想要做向下翻转的动画，我们可以使用下面代码段中显示的<div>。
<div id="main">
<div data-aos="flip-down">Flip down!</div>
</div>
对于 Flip-left ，代码片段如下所示。
<div id="main">
<div data-aos="flip-left">Flip left!</div>
</div>
对于 Flip-right ，下面显示了代码片段。
<div id="main">
<div data-aos="flip-right">Flip right!</div>
</div>
使用AOS.js的缩放动画
缩放动画模拟了缩放行为，总共有8种不同的动画效果可以实现。它们分别是−
- 缩放进入
- 向上缩放进入
- 向下缩放进入
- 向左缩放进入
- 向右缩放进入
- 缩放退出
- 向上缩放退出
- 向下缩放退出
- 向左缩放退出
- 向右缩放退出
现在，让我们在一个简单的HTML-CSS示例中逐个使用它们。
index.html
考虑以下 index.html 文件，在其中我们将使用”缩放进入”动画。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
#body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="zoom-in" data-aos-duration="3000">Zoom in!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
当我们在浏览器中运行上述代码时，我们应该看到一个向上缩放动画的 div 。
同样地，如果我们想要使用 向上缩放动画， 我们可以使用下面代码片段中显示的<div>。
<div id="main">
<div data-aos="zoom-in-up">Zoom in up!</div>
</div>
对于 放大进入下滑, 代码段显示如下。
<div id="main">
<div data-aos="zoom-in-down">Zoom in down!</div>
</div>
对于 放大左侧 ，代码段如下所示。
<div id="main">
<div data-aos="zoom-in-left">Zoom in left!</div>
</div>
对于 Zoom-in-right 效果，代码片段如下所示。
<div id="main">
<div data-aos="zoom-in-right">Zoom in right!</div>
</div>
同样地，如果我们想要做 缩小动画， 我们可以利用代码片段中显示的<div>。
<div id="main">
<div data-aos="zoom-out">Zoom out!</div>
</div>
对于 Zoom-out-up ，代码片段如下所示。
<div id="main">
<div data-aos="zoom-out-up">Zoom out up!</div>
</div>
对于 Zoom-out-down ，代码片段如下所示。
<div id="main">
<div data-aos="zoom-out-down">Zoom out down!</div>
</div>
对于 Zoom-out-left ，代码片段如下所示。
<div id="main">
<div data-aos="zoom-out-left">Zoom out left!</div>
</div>
对于 Zoom-out-right ，代码片段如下所示。
<div id="main">
<div data-aos="zoom-out-right">Zoom out right!</div>
</div>
使用AOS.js进行多个设置动画
在以上所有示例中，我们都使用了单个动画且没有其他选项，但是AOS.js还允许我们在动画中使用选项。例如，考虑这样一种情况，我们希望使用 淡出向下 的动画，但是动画时长可以设定。
在下面的代码片段中，我们将创建一个 淡出向下 的动画，并为其设置一个持续时间。
<div id="main">
<div data-aos="fade-down" data-aos-duration="3000"></div>>Fade Down With Duration!</div>
</div>
结论
在本教程中，我们演示了如何使用AOS.js、HTML和CSS来在滚动时创建动画。