应抽离动画为独立@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"> <h3>不同组件需要微调动画参数（比如延迟、循环次数），又不想复制整个 keyframes 怎么办</h3> <p>CSS 自身不支持参数化 <code>@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不是银弹，滥用反而增加内存开销，只在明确知道该元素即将动画且持续时间较长时才加。 - 加动画前先读一个布局属性，如
