animate.css动画库教程
Animate.css 是一个开源的 CSS 库，它提供了一系列简单而强大的动画效果，你可以轻松地将这些效果应用到你的网页元素中。无论你是在构建一个个人博客、电子商务网站，还是企业级应用，Animate.css 都能帮助你提升用户体验，使你的网页更加生动有趣。
1. 安装 Animate.css
使用 Animate.css 非常简单，你可以通过以下几种方式将其添加到你的项目中：
通过 CDN 引入：
在你的 HTML 文件的 <head> 标签内添加以下代码：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
通过 npm 安装： 如果你使用 npm 管理你的前端依赖，可以运行以下命令：
npm install animate.css
然后在你的项目中引入：
import 'animate.css/animate.min.css';
手动下载： 你也可以直接从 GitHub（https://github.com/daneden/animate.css）下载 Animate.css 文件，并将其包含在你的项目中。
2. 使用 Animate.css 动画
Animate.css 提供了多种动画效果，你可以通过为 HTML 元素添加特定的类名来使用这些效果。
基本用法：
在你的 HTML 文件中，为想要应用动画的元素添加 animated 类和一个具体的动画类名，例如 bounce：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animate.css Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body>
<div class="animate__animated animate__infinite animate__bounce">Hello, Animate.css!</div>
</body>
</html>
效果如下：
延迟和循环：
Animate.css 还支持动画延迟和无限循环。你可以通过添加 animate__delay- 和 animate__infinite 类名来实现这些效果：
<div class="animate__animated animate__bounce animate__delay-2s animate__infinite">Infinite Bounce delay 2s</div>
这里的 delay-2s 表示动画延迟 2 秒后开始，infinite 表示动画无限循环。
效果如下：
触发动画： 默认情况下，Animate.css 动画在页面加载时立即触发。如果你想在特定事件（如点击）时触发动画，你可以使用 JavaScript 来动态添加和移除动画类名。
例如，在点击时触发动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animate.css Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
#myElement {
padding: 20px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="myElement">Click me!</div>
<script>
document.getElementById('myElement').addEventListener('click', function() {
// 先移除所有动画类名，防止动画效果叠加
var element = this;
element.classList.remove('animate__animated', 'animate__bounce');
// 设置一个小的延迟，确保动画类名被移除
setTimeout(function() {
// 添加动画类名
element.classList.add('animate__animated', 'animate__bounce');
// 等待动画完成后移除动画类名（这里假设动画持续时间为1秒）
setTimeout(function() {
element.classList.remove('animate__animated', 'animate__bounce');
}, 1000); // 动画持续时间需要根据实际使用的动画调整
}, 10); // 10ms 的延迟确保移除操作在点击事件之后立即执行
});
</script>
</body>
</html>
3. 自定义和扩展
虽然 Animate.css 提供了丰富的动画效果，但有时候你可能需要自定义动画。这时，你可以结合 CSS 动画和关键帧来创建你自己的动画效果。
创建自定义动画：
@keyframes myCustomAnimation {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(100px);
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.myCustomClass {
animation: myCustomAnimation 2s infinite;
}
然后在 HTML 中使用这个类：
<div class="myCustomClass">Custom Animation</div>
效果如下：
总结
Animate.css 是一个强大且易于使用的 CSS 动画库，它能够帮助你快速地为网页元素添加各种动画效果。通过简单的类名添加和移除，你可以控制动画的触发时机和持续时间，甚至可以结合 JavaScript 来实现更复杂的动画逻辑。
本文地址：https://www.tides.cn/p_css-animate.css-tutorial