CSS动画应通过自定义属性集中控制时长、缓动等参数，统一命名规范为anim-前缀+动作+方向，复合属性需显式声明fill-mode等关键项，优先用class切换而非JS直接操作style.animation。
用 CSS 自定义属性（--）集中控制动画参数
动画效果分散在多个 @keyframes 或选择器里，改一个时长就得全局搜 0.3s、ease-in-out，极易漏改或不一致。把关键参数抽成自定义属性，能从根节点统一调控。
-
:root中定义--anim-duration: 0.25s、--anim-easing: cubic-bezier(0.4, 0, 0.2, 1)、--anim-delay: 0 - 所有动画规则中用
animation-duration: var(--anim-duration)替代硬编码值 - 需要临时覆盖时，只在局部作用域（如组件类名）重设
--anim-duration，不影响其他地方
把 @keyframes 命名标准化并按功能归类
命名混乱（比如 fadein、fadeInAnim、enter-from-top）会导致复用困难、查找成本高。统一前缀 + 动作 + 方向的结构，配合文件级分组更可控。
- 命名格式：以
anim-开头，如anim-fade-in、anim-slide-up、anim-scale-down - 避免语义模糊词，不用
quick、slow，改用具体数值标识（如anim-fade-in-200表示 200ms） - 大型项目建议拆出
_animations.css文件，再按类型分段注释：@keyframes anim-fade-in { from { opacity: 0; } to { opacity: 1; } } <p>/<em> === SLIDE === </em>/ @keyframes anim-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
用 animation 复合属性时优先显式声明必要项
写 animation: fade-in 0.2s 看似简洁，但会隐式继承浏览器默认值（如 animation-fill-mode: none），导致动画结束后元素跳回初始状态，这是最常被忽略的 Bug 来源。
- 至少显式写出
animation-fill-mode，多数交互场景应为forwards - 若需暂停/恢复控制，必须加上
animation-play-state初始值（如paused） - 推荐模板：
animation: anim-fade-in var(--anim-duration) ease forwards
避免在 JS 中直接操作 style.animation 修改动画
JS 动态设置 element.style.animation = 'anim-spin 1s linear infinite' 会覆盖整个复合属性，清空之前通过 class 控制的 animation-duration 或 animation-delay，造成样式失控。
立即学习“前端免费学习笔记（深入）”；
- 改用 class 切换控制动画启停：
element.classList.add('is-spinning')，CSS 中写.is-spinning { animation: anim-spin 1s linear infinite; } - 需要动态传参（如速度）？仍走 CSS 变量：
element.style.setProperty('--spin-speed', '2s')，然后在@keyframes中无法直接用变量，但可通过animation-duration: var(--spin-speed)实现间接控制 - 真要 JS 触发一次性动画？用
element.animate()API 更安全，它不干扰 CSS 层叠流
维护成本最高的从来不是写新动画，而是改旧动画时不敢动——因为不知道哪个组件依赖了哪个 @keyframes 名，或者改了 duration 后某处过渡突然变卡。变量 + 命名 + 显式声明这三件事做扎实，比堆 fancy 工具更管用。
