CSS 动画库 - 绿叶网

CSS 动画本身是比较复杂的东西，代码量往往也比较大。在实际项目开发中，为了提高开发效率，我们可以考虑使用 CSS 动画库来辅助开发。

CSS 动画库简介

CSS 动画库，可以帮助我们快速开发 CSS 动画。它们通常提供预定义的动画效果 CSS 动画库使用起来很简单，只需要将库文件引入到 HTML 中，然后在需要添加动画的元素上使用相应的类名即可。

CSS 动画库

CSS 动画库具有以下的优点。

提高开发效率 : CSS 动画库使用预定义的动画效果，大大减少编码量。
提高可读性 : CSS 动画库通常提供简洁的语法，使得代码更有可读性。
兼容性好 : CSS 动画库往往做了很多兼容工作，可以确保动画在所有浏览器中都能一致显示。
扩展性强 : 许多 CSS 动画库都支持自定义动画，使得我们可以创建独特的动画效果。

常用的 CSS 动画库

CSS 动画库非常多，最常用的有以下几种：

Animate.css：它是一个包含超过 70 种预定义动画效果的库。它易于使用，并且与所有现代浏览器兼容。

animate.css

Motion UI：它是一个轻量级的动画库，专注于性能和易用性。它提供了一组基本的动画效果，并支持自定义动画。

Motion UI

CSShake：它专注于实现多种不同样式的抖动效果，适用于广告、图像、按钮等，以吸引用户眼球。

CSShake

Hover.css：它提供了一系列在鼠标悬停时触发的动画效果，增强了用户与网页的交互体验。

Hover.css

如何使用 CSS 动画库？

接下来，我们就基于 Animate.css 来介绍一下 CSS 动画库是如何使用的。当然了，如果想要更深入了解这些动画库是如何使用的，请查看对应的官方网站。

示例 1：animate.css 实现弹跳动画

运行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入 Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="box animate__animated animate__bounce animate__infinite"></div>
</body>
</html>

运行结果如下。

animate.css 实现弹跳动画

分析：

想要使用 animate.css，首先需要使用 link 标签引入 animate.css 库：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

上面这种方式会从 CDN 引入最新版本的 animate.css。当然了，小伙伴们也可以下载 animate.css 文件到本地项目中再引入。

引入 animate.css 库之后，我们直接给元素添加对应的类名，就会自动产生动画了。其中：

animate__animated：想要使用动画的元素必须要添加这个类名。
animate__bounce：该类提供弹跳动画。
animate__infinite：该类表示动画会无限循环。

示例 2：animate.css 实现摇晃动画

运行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入 Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="box animate__animated animate__swing animate__infinite"></div>
</body>
</html>

页面效果如下图所示。

animate.css 实现摇晃动画

分析：

在 animate.css 中，animate__swing 类提供了摇晃动画效果。

示例 3：animate.css 实现淡入动画

运行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入 Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="box animate__animated animate__fadeIn"></div>
</body>
</html>

页面效果如下图所示。

animate.css 实现淡入动画

分析：

animate__fadeIn 类提供了淡入效果。当页面加载时，.box 元素会以淡入动画显示出来。

CSS 动画库常见问题

1. 上面提到的这些 CSS 动画库，能否在 Vue、React 等项目中使用？

答案是肯定的，绝大多数 CSS 动画库，都可以在 Vue、React 等项目中使用。

2. 咱们绿叶网是否也用到了 CSS 动画库呢？

CSS 动画库体积往往比较大，而我们绿叶网使用的动画大多数都是比较简单的动画。因此为了更好的页面加载性能，就没有使用 CSS 动画库。