可通过自定义@keyframes与Animate.css类结合实现灵活动画：1. 理解Animate.css基于@keyframes和类名触发；2. 添加自定义动画如shake-custom并创建对应类；3. 用JavaScript控制动画顺序，如先fadeIn再shake-custom；4. 覆盖默认样式调整时长或缓动函数。结合使用需注意命名冲突与时长协调。
在使用 Animate.css 时，虽然它本身已经封装了大量基于 @keyframes 的预设动画，但你也可以自定义 @keyframes 并与 Animate.css 的类结合使用，实现更灵活的动画效果。下面介绍如何将两者结合使用。
1. 理解 Animate.css 的工作原理
Animate.css 实际上是通过 CSS 的 @keyframes 定义动画，然后通过类名触发这些动画。例如：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animated {
animation-duration: 1s;
}
.fadeIn {
animation-name: fadeIn;
}
当你给元素加上 class="animated fadeIn" 时，就会播放淡入动画。
2. 自定义 keyframes 与 Animate.css 类共存
你可以添加自己的 @keyframes 动画，并创建对应的类来使用，同时保留 Animate.css 提供的样式。
立即学习“前端免费学习笔记（深入）”；
例如，你想做一个“左右晃动”的自定义动画：
@keyframes shake-custom {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
.shake-custom {
display: inline-block;
animation-name: shake-custom;
animation-duration: 0.5s;
animation-fill-mode: both;
}
现在你可以像使用 Animate.css 一样使用这个类：
我会左右晃动
3. 结合 Animate.css 和自定义动画
如果你想让一个元素先执行 Animate.css 的 fadeIn，再执行自定义的 shake-custom，可以通过 JavaScript 控制动画顺序：
const el = document.querySelector('#myElement');
el.classList.add('animated', 'fadeIn');
el.addEventListener('animationend', function() {
el.classList.remove('fadeIn');
el.classList.add('shake-custom');
});
或者使用 setTimeout 控制时间间隔。
4. 覆盖或扩展 Animate.css 动画
你还可以修改 Animate.css 的默认行为，比如调整某个动画的持续时间或贝塞尔曲线：
/* 修改 bounceIn 效果 */
.bounceIn.custom-fast {
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
然后这样使用：
快速弹入
基本上就这些。Animate.css 提供了便捷入口，而 @keyframes 给你完全控制权。结合使用时，注意命名不冲突、动画时长合理、用 JavaScript 控制流程会更灵活。
