animate__animated类可直接触发进入动画，但仅首次渲染生效；悬停动画需手动定义CSS规则；animation-name不支持多值叠加；移动端Safari对animation-play-state支持不稳定。
直接用 animate.css 的 animate__animated 类就能触发进入动画
animate.css 是最常用的 CSS 动画框架之一，它的设计就是“加类即动”。只要元素有 animate__animated 这个基础类，再叠加一个具体动画类（比如 animate__fadeIn），页面加载时就会自动播放一次进入动画。
注意：它默认只在元素首次渲染时触发，不监听后续的 DOM 插入或 visibility 变化。如果需要动态添加后才动画，得手动触发重排或用 JavaScript 补帧：
element.classList.add('animate__animated', 'animate__fadeIn')- 紧接着执行
void element.offsetWidth强制重排，确保浏览器识别到类变化 - 或者用
setTimeout(() => { ... }, 10)延迟添加动画类
.box {
width: 100px;
height: 100px;
background: #4e73df;
}
.box.animate__animated {
animation-duration: 0.8s;
}
悬停动画必须配合 :hover 才能生效
animate.css 本身不提供 hover 动画类，所有悬停效果都要靠你自己组合。常见错误是直接写 animate__pulse:hover——这没用，因为 animate__pulse 是一个完整动画定义，不是可复用的 keyframes 名称。
正确做法是把动画名提取出来，在 CSS 中重写 hover 规则：
立即学习“前端免费学习笔记（深入）”；
- 查文档确认动画对应的
@keyframes名，例如animate__pulse对应的是animate__pulse（名称一致） - 用
animation-name显式调用，避免依赖类名隐式绑定 - 记得设置
animation-fill-mode: both，否则悬停结束会回退到初始状态
.hover-pulse:hover {
animation-name: animate__pulse;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
多个动画叠加时，animation-name 不支持逗号分隔
CSS 的 animation-name 属性不能像 transform 那样叠加多个值。如果你试图写 animation-name: animate__fadeIn, animate__bounce，浏览器只会取第一个，第二个被忽略。
真正可行的方式只有两种：
- 把多个动画逻辑合并进一个自定义
@keyframes（适合简单组合） - 用两个子元素分别套不同动画类，通过结构控制层级和时机
- 改用 Framer Motion 或 GSAP 等 JS 动画库，它们天然支持链式/并发动画
animate.css 官方也明确不支持多动画类同时作用于同一元素——animate__fadeInUp animate__delay-1s 可以共存，但那是靠预设的 duration/delay 类控制单个动画的参数，不是并发执行两个动画。
移动端 Safari 对 animation-play-state 支持不稳定
想用 hover 实现“悬停开始、离开暂停”的交互？别依赖 animation-play-state: paused/running。iOS 15–16 的 Safari 存在已知 bug：在 :hover 中切换 animation-play-state 会失效，甚至导致整个动画卡死。
更稳妥的替代方案：
- 用
transform: scale(1.05)+transition替代简单缩放类 - 对复杂动画，监听
touchstart/touchend手动增删类，避开伪类 - 检测
matchMedia('(hover: hover)')，只为支持 hover 的设备启用 hover 样式
animate.css 的 animate__repeat 类在移动端也容易因 touch 事件干扰而中断循环，建议慎用。
