动画不流畅主因是参数与渲染配置不当：需设合理 duration（0.3s–0.45s）、按动画类型选 timing-function、启用硬件加速（translateZ(0) 或 will-change）、避免布局重排属性，并防 JS 重复触发。
动画不流畅，通常不是 animate.css 本身的问题，而是动画参数和元素状态没配好。重点调好 animation-duration 和 timing-function，再检查几个容易被忽略的渲染条件。
时长（duration）别太短或太碎
小于 0.2s 的动画人眼难捕捉过渡，容易显得“卡”或“闪”；超过 0.6s 又可能拖沓、失焦。推荐起步值设为 0.3s–0.45s，比如：
-
animation-duration: 0.35s;—— 多数入场/强调动画的舒适区间 - 连续触发的动画（如 hover → click → leave），各阶段 duration 最好统一或成倍数，避免节奏断裂
- 避免用
0.1s做淡入，它常被浏览器降帧处理，反而更不顺
缓动函数（timing function）别只用 ease
animate.css 默认用 ease（即 cubic-bezier(0.25, 0.1, 0.25, 1)），适合一般场景，但对位移、缩放类动画常显“前慢后冲”。可针对性替换：
- 入场动画（如
fadeInUp）：改用cubic-bezier(0.22, 0.61, 0.36, 1)（类似 ease-out + 尾部拉长） - 强调/弹跳类（如
bounceIn）：保留原ease-in-out或微调为cubic-bezier(0.34, 1.56, 0.64, 1)增强弹性感 - 纯位移（如
slideInLeft）：试试ease-out或cubic-bezier(0.33, 0, 0.15, 1)，让启动更利落
确保硬件加速和图层独立
即使参数调对，若浏览器没启用 GPU 渲染，动画仍会掉帧。加这两行保底：
立即学习“前端免费学习笔记（深入）”；
-
transform: translateZ(0);或will-change: transform;（写在动画元素上） - 避免对
width、height、top/left等触发布局重排的属性做动画 - 如果用了
opacity+transform组合（如 fade + slide），确保两者都在同一动画声明里，别拆成两个 animation
检查是否被 JS 阻塞或重复触发
animate.css 常配合 JS 添加 class 触发动画，这时要注意：
- 别在快速滚动/鼠标连击时反复 add/remove 同一动画 class（会中断正在播的帧）
- 用
animationend事件清理 class，或加防抖逻辑，比如 300ms 内只响应一次触发 - 避免在
scroll或resize回调里直接操作动画 class，优先用 IntersectionObserver 控制可见区域动画
