animateCSS 是一个基于 CSS 的动画库，可以通过 npm 安装并在前端项目中使用。它能够帮助我们快速实现各种复杂的动画效果，让网站变得更加生动有趣。
安装 animateCSS
在终端中执行以下命令进行安装：
npm install animate.css
安装完成后，我们就可以在项目中使用 animateCSS 了。
使用 animateCSS
- 引入 animateCSS
在 HTML 文件中，我们需要引入 animateCSS 的样式文件：
<link rel="stylesheet" href="./node_modules/animate.css/animate.min.css">
- 添加动画类名
为了给元素添加动画效果，我们需要在对应元素的 class 属性中添加 animateCSS 提供的动画类名。例如，想要一个按钮实现 bounce 动画效果，在 HTML 中可以这样写：
<button class="animate__animated animate__bounce">点击我</button>
- 配置动画参数
除了基本动画类名，animateCSS 还提供了一些可选的动画参数以及自定义类名。我们可以通过这些参数来控制动画的速度、延迟、方向等等。例如，以下代码可以让一个元素实现 fadeInDown 动画效果，并设置动画时长为 2 秒：
<div class="animate__animated animate__fadeInDown animate__slow" style="--animate-duration: 2s;">Hello, animateCSS!</div>
示例代码
下面是一个使用 animateCSS 实现多个动画效果的完整示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ----------
----- ---------------- --------------------------------------------------
-------
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
-
---- -
------- --- ----- -----
-------- -----
------- -----
----------- -------
---------- ------
-
--------
-------
------
---- ------------------
---- ---------- ----------------- -----------------------
-------- ------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
---- ---------- ----------------- --------------- -------------------
-------- ------
------ -- ------- ------ ---------- -- ------ -- ------ ----- -----------
------
---- ---------- ----------------- -------------- -------------------
-------- ------
----- ---- -- ----- ------- ---- ------- ------------ ------- ------- ---- -- ------- -- -- ------- --------------
------
------
-------
-------以上代码会展示三个不同的动画效果，分别是 bounceInLeft、fadeIn 和 pulse。其中第二个动画效果使用了 delay-1s 参数，让动画延迟 1 秒后再执行。
结语
animateCSS 是一个非常实用的前端库，它可以帮助我们轻松地实现各种复杂的动画效果。通过本文的介绍，相信读者们已经掌握了 animateCSS 的基本用法，可以在自己的项目中尝试使用了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38257