Animate.css需手动添加animate__animated基础类才能生效，动画不自动触发，须用JS或IntersectionObserver控制，注意兼容性、性能及animationend清理。
Animate.css 不是“拿来就能用”的动效库——它默认不自动触发动画，也不处理浏览器前缀或性能优化细节。直接加 animated bounce 类名却没反应？大概率是漏了基础配置。
必须手动添加 animate__animated 基础类
Animate.css v4+ 强制要求所有动画元素都带 animate__animated 这个基础类，否则 CSS 选择器不匹配，动画完全不会生效。它负责设置 animation-duration、animation-fill-mode 等共用属性。
常见错误：只写 animate__bounce，忘了前置 animate__animated
- ✅ 正确写法：Hello
- ❌ 错误写法：
- ⚠️ 注意：两个类名之间不能省略空格，也不能合并成一个类名
动画默认不自动播放，需靠 JS 触发或监听滚动
Animate.css 只提供 CSS 类定义，不绑定任何 JavaScript 行为。页面加载时不会自动播放，也不会在元素进入视口时自动激活。
典型使用场景：
- 点击触发：用 JS 切换类名，例如
el.classList.add('animate__fadeIn') - 滚动触发：配合
IntersectionObserver，检测元素可见后添加animate__animated+ 动画类 - 避免重复播放：添加完动画类后，建议监听
animationend事件并移除animate__animated（否则再次添加同类名无效）
示例（点击播放一次）：
button.addEventListener('click', () => {
const el = document.querySelector('.target');
el.classList.remove('animate__animated', 'animate__fadeIn');
void el.offsetWidth; // 强制重排，确保类名切换被识别
el.classList.add('animate__animated', 'animate__fadeIn');
});
注意兼容性与性能关键配置
v4 默认启用 CSS 自定义属性（如 --animate-duration），但 IE 完全不支持；若需兼容旧浏览器，得回退到 v3 或手动覆盖变量。
- 动画时长统一控制：可全局设置
:root { --animate-duration: 0.8s; }，所有动画自动继承 - 禁用动画（无障碍/省电模式）：系统级
prefers-reduced-motion: reduce会被 Animate.css 尊重，此时动画自动降级为淡入淡出或禁用 - 慎用高开销动画：如
animate__swing、animate__rollIn涉及transform: rotate()，在低端 Android 上易掉帧；优先选基于transform: translate()和opacity的类（如animate__fadeInUp）
最常被忽略的一点：Animate.css 的动画类名是“一次性触发器”，不是状态类。加完不移除，下次再加同一个动画类名就无效——得先移除再重加，或者用 animationend 清理。这点和纯 CSS keyframes 的行为一致，但新手容易当成类似 Vue 的过渡类那样自动管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
