可复用CSS3动画需语义化命名、多关键帧控制、仅用transform/opacity、补全animation-fill-mode:forwards、避免display切换、合理使用HTML5标签及移动端适配。
直接用 animation 和 @keyframes 就能做出大多数 CSS3 动画，不需要 JS；但 HTML5 语义化结构 + 正确的 DOM 触发时机，才是动画不卡、不闪、不误播的关键。
怎么写一个可复用的 @keyframes 规则
命名要有业务含义，别叫 slideIn 这种泛泛的名字，比如按钮悬停时的反馈动画，就该叫 btn-hover-pulse；否则多人协作时容易重复定义或覆盖。
关键点：
-
from和to能满足简单线性变化，但多数真实动效需要 3–5 个关键帧，用百分比更可控 - 避免在
@keyframes里写display: none—— 浏览器不会动画这个属性，会导致突显/突隐 - 优先用
transform和opacity，这两者触发 GPU 加速，left/top或width会频繁触发重排（reflow）
@keyframes btn-hover-pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: 0.9; }
100% { transform: scale(1); opacity: 1; }
}
animation 属性怎么配才不翻车
单独写 animation: btn-hover-pulse 0.3s ease-out; 看似简洁，但漏掉 animation-fill-mode 就可能让动画结束后元素“弹回”初始状态，尤其在 hover 退出时特别明显。
立即学习“前端免费学习笔记（深入）”；
推荐写法（用简写但补全关键项）：
-
animation必带animation-fill-mode: forwards，保证最后一帧保留 - 需要手动控制播放（比如点击触发），就用
animation-play-state: paused+ JS 切换running - 避免设
animation-iteration-count: infinite在长页面里——滚动出视口后动画仍在跑，浪费 CPU
.cta-button {
animation: btn-hover-pulse 0.3s ease-out forwards;
}
.cta-button:hover {
animation-play-state: running;
}
HTML5 标签怎么影响动画行为
不是所有标签都适合挂动画：比如 默认是 display: none，直接加 animation 不生效； 内部 img/video 帧率不稳定，做入场动画容易撕裂。
更稳妥的选择：
- 用
或包裹动效模块，它们是普通块级容器，无默认 display 干扰 - 需要条件显示的动画，优先用
hidden属性 +transition控制 visibility，而不是display切换 -
上的动画别用 CSS，交给requestAnimationFrame—— CSS 动画无法精确同步 canvas 渲染节奏
移动端真机上动画突然变慢或跳帧？检查这三处
iOS Safari 和 Android Chrome 对 will-change、硬件加速和 touch 事件监听非常敏感，动画卡顿往往不是代码问题，而是触发条件没对齐。
- 给动画元素加
will-change: transform，但只在动画即将开始前加（JS 中 setAttribute），动画结束立刻 remove —— 长期挂着会吃内存 - 如果动画由
touchstart触发，必须在事件回调里加event.preventDefault()，否则 iOS 会等 300ms 判断是否双击，导致延迟 - 避免在
:active伪类里写复杂动画 —— Android 多数浏览器不支持:active在非可点击元素上生效，得靠 JS 模拟
真正难的不是写出动画，是让同一段 CSS 在 Chrome DevTools 里丝滑，在 iPhone SE 上不掉帧，在折叠屏展开瞬间不重绘两次。这些细节不写进文档，但改一行 animation-fill-mode 或删一个 display，效果天差地别。
