1. 前言
近年来前端出现了太多了框架，美其名曰帮助用户快速构建应用，但都沦为了资本流水线上的工人。
懂的人自然懂。
学习资料：
2. 引入animate.css
我们采用CDN的方式引入，其实就是通过网络的方式引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识Animate.css</title>
<!-- 引入Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
3. 第一个动画
创建一个h1标签，并让它动起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识Animate.css</title>
<!-- 引入Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<h1>引入Animate css</h1>
<h1 class="animate__animated animate__bounce">An animated element</h1>
</body>
</html>
4. 什么是keyframes（关键帧）？
在动画设计中，关键帧指的是动画序列中定义了特定时间点样式变化的帧。
CSS中的@keyframes规则允许开发者指定一个动画周期内的关键帧，这些关键帧定义了动画在不同时间点的样式，从而创建出平滑的动画效果。
@keyframes是CSS3引入的一个特性，大大增强了网页的动态表现能力。
5. 尝试各种动画
image.png
官网首页的右侧，提供了所有动画功能，逐个动手体验一遍。
到目前为止，可以实现引入基本动画功能了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识Animate.css</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<h1>Animate css 吸引眼球的12个动画</h1>
<h1>1. 弹跳</h1>
<div class="animate__animated animate__bounce">
<span>this a sentence.</span>
</div>
<h1>2. 闪烁</h1>
<div class="animate__animated animate__flash">
<span>this a sentence.</span>
</div>
<h1>3. 缩放</h1>
<div class="animate__animated animate__pulse">
<span>this a sentence.</span>
</div>
<h1>4. 橡皮筋</h1>
<div class="animate__animated animate__rubberBand">
<span>this a sentence.</span>
</div>
<h1>5. X轴晃动</h1>
<div class="animate__animated animate__shakeX">
<span>this a sentence.</span>
</div>
<h1>6. Y轴晃动</h1>
<div class="animate__animated animate__shakeY">
<span>this a sentence.</span>
</div>
<h1>7. X轴轻微晃动</h1>
<div class="animate__animated animate__headShake">
<span>this a sentence.</span>
</div>
<h1>8. 摇摆（像钉在某一点上摇摆）</h1>
<div class="animate__animated animate__swing">
<span>this a sentence.</span>
</div>
<h1>9. tada</h1>
<div class="animate__animated animate__tada">
<span>this a sentence.</span>
</div>
<h1>10. 摇晃（像雨刷一样摇摆）</h1>
<div class="animate__animated animate__wobble">
<span>this a sentence.</span>
</div>
<h1>11. 果冻</h1>
<div class="animate__animated animate__jello">
<span>this a sentence.</span>
</div>
<h1>12. 心跳</h1>
<div class="animate__animated animate__heartBeat">
<span>this a sentence.</span>
</div>
</body>
</html>
