应抽离动画为独立@keyframes与语义化类名组合，统一管理于animations.css；用变量控制延迟等参数，避免硬编码；JS触发动画需强制重排或requestAnimationFrame；仅用transform和opacity保障性能。
动画样式散落在各个组件里，改一处要找十几处怎么办
直接抽成独立的 @keyframes + 类名组合，别再写内联 animation 或重复定义帧。所有动画逻辑收口到一个 animations.css 文件里，用语义化类名命名，比如 .fade-in、.slide-up、.pulse-slow —— 不要用 .anim-1 这种。
常见错误是把时长、贝塞尔曲线也硬编码进类名里，结果需求一变就得新增一堆类。更稳妥的做法是分层：基础动画帧 + 可覆盖的变量或工具类。
-
@keyframes fade-in只管透明度变化，不指定duration或timing-function - 用单独的工具类控制节奏，比如
.duration-300、.ease-out-cubic - 组合使用：
<div class="fade-in duration-300 ease-out-cubic">
不同组件需要微调动画参数（比如延迟、循环次数），又不想复制整个 keyframes 怎么办
CSS 自身不支持参数化 @keyframes，但可以用 CSS 自定义属性（-- 变量）在运行时注入变化。关键点：变量必须在动画定义外层作用域设置，并在 @keyframes 中通过 calc() 或直接引用生效（注意浏览器兼容性）。
例如实现可配置延迟的淡入：
立即学习“前端免费学习笔记（深入）”；
:root {
--anim-delay: 0s;
}
.fade-in-delayed {
animation: fade-in 0.4s forwards;
animation-delay: var(--anim-delay);
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
这样只需在具体元素上设 style="--anim-delay: 0.2s"，不用动 keyframes 本身。注意：Safari 对 @keyframes 内部使用 CSS 变量支持有限，建议只在 animation-delay、animation-duration 等属性上用变量，别试图在帧内用 var(--opacity-start)。
用 JS 控制动画启停/重播时，class 切换总失效或触发两次怎么办
根本原因是浏览器对 class 变更的重排（reflow）时机不可控，element.classList.add("animate") 后立刻 element.classList.remove("animate")，可能被合并或跳过。正确做法是强制触发重排，再操作：
- 加动画前先读一个布局属性，如
element.offsetHeight - 或用
getComputedStyle(element).transform触发同步计算 - 更稳妥的是用
requestAnimationFrame分两帧处理
示例（重播动画）：
function replayAnimation(el, className) {
el.classList.remove(className);
// 强制重排
void el.offsetWidth;
el.classList.add(className);
}
如果用 Web Animations API（el.animate()），反而更容易失控 —— 它和 CSS class 动画共存时会互相干扰，建议二选一，别混用。
动画太多导致页面卡顿，排查发现是 transform 和 opacity 没用对
只有 transform 和 opacity 是能走合成层（compositor layer）的属性，其余如 height、margin、background-color 都会触发布局（layout）+ 绘制（paint），尤其在中低端设备上掉帧明显。
- 想实现“缩放+淡出”，用
transform: scale(0.8)+opacity: 0.5，别用width+height - 想“上下滑动”，用
transform: translateY(-20px)，别用top或margin-top - 检查 DevTools → Rendering → “Paint flashing” 和 “FPS meter”，看哪些区域频繁重绘
顺带一提：will-change: transform 不是银弹，滥用反而增加内存开销，只在明确知道该元素即将动画且持续时间较长时才加。
