animate.css 是一个在网页上添加 CSS 动画效果的开源库，它提供了 70 多种动画效果，可以轻松地在网站中使用。本文将介绍如何通过 npm 安装并使用 animate.css。
安装
在命令行输入以下命令来安装 animate.css：
--- ------- -----------
引入
有两种方式来引入 animate.css。一种是直接在 HTML 文件中引入，另一种是通过 JavaScript 引入。
直接引入
将下面的代码添加到 HTML 文件的头部：
----- ---------------- ------------------------------------------------
通过 JavaScript 引入
如果你使用的是模块化开发工具（例如 webpack），则可以在 JavaScript 文件中引入 animate.css：
------ --------------
使用
使用 animate.css 非常简单，只需要为元素添加一个类名即可。例如，如果要为一个 div 元素添加弹跳动画效果，只需将其 class 属性设置为 "animate__animated animate__bounce"：
---- ------------------------ ----------------------- ------------
也可以使用 JavaScript 来控制动画。例如，以下代码使用 jQuery 在点击按钮时为 div 元素添加动画效果：
------- -------------------------
---- ----------------- ------------
--------
-------------------------- -
--------------------------------------- ------------------
---
---------自定义
如果你想要自定义 animate.css 的动画效果，可以通过修改 CSS 文件或者使用 customize-animate 工具来实现。具体操作可参考其官方文档。
结语
animate.css 提供了大量的动画效果，可以为网站增加一些视觉上的效果，提升用户体验。同时，我们也可以通过阅读 animate.css 的代码来学习 CSS3 动画的实现方式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32193