animate.css是一个流行的CSS库，可以帮助您轻松地创建漂亮而流畅的CSS动画效果。该库非常易于使用，下面让我们一起来学习如何使用它。

第一步是将animate.css链接到您的文档中。您可以从animate.css GitHub页面上下载文件，或者使用CDN连接，如下所示：

<!-- 使用CDN --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/><!-- 下载animate.css文件并链接 --><link rel="stylesheet" href="path/to/animate.css"/>

完成链接后，您可以开始使用各种动画类来给元素添加动画效果了。例如，要使元素淡入，您可以使用fadeIn类：

<p >我会淡入！</p>

您还可以使用animate__delay和animate__duration来控制动画延迟和持续时间，以及animate__iteration来指定动画应重复的次数。以下是一个例子：

<p >我会跳动，并且会在2秒后开始，3秒后停止，一直重复直到页面关闭！</p>

最后，您还可以使用回调函数来在动画完成时执行JavaScript代码。例如，要在动画完成后隐藏元素，并在控制台中输出一条消息，可以这样写：

<p  onclick="myFunction()" onanimationend="hideElement()">点我淡出！</p><script>function myFunction() {console.log("clicked");}function hideElement() {document.querySelector(".animate__fadeOut").style.display = "none";}</script>

就是这样！animate.css是一种简单易用的方式来为您的网站添加动画效果。开始尝试使用它，并创建令人惊叹的动画效果吧！