1. 前言

近年来前端出现了太多了框架，美其名曰帮助用户快速构建应用，但都沦为了资本流水线上的工人。
懂的人自然懂。

学习资料：

Animate.css中文官网

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>