拆分复杂动画为职责单一的小动画是提升可维护性的最直接方式，按变换类型命名（如slide-in-left、scale-up-smooth），用CSS自定义属性控制参数，通过语义化class组合触发阶段，优先使用transform/opacity并优化性能。
把复杂动画拆成多个小动画组合，是提升可维护性的最直接有效方式。关键不在于“少写代码”，而在于让每个动画职责单一、命名清晰、便于调试和复用。
按视觉层次拆分动画
一个页面元素常同时涉及位移、缩放、旋转、透明度、阴影变化等。与其全堆在 @keyframes 里，不如按变换类型拆开：
-
位移动画：只控制
transform: translateX/Y，命名如slide-in-left -
缩放动画：只控制
transform: scale，命名如scale-up-smooth -
状态动画：只控制
opacity和visibility，命名如fade-in-quick
这样改某个效果时，只需定位到对应动画定义，不会误动其他属性。
用 CSS 自定义属性控制参数
避免为微调反复复制粘贴整个 @keyframes。把持续时间、延迟、贝塞尔曲线等抽成自定义属性：
立即学习“前端免费学习笔记（深入）”；
.card {
--anim-duration: 0.4s;
--anim-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
animation: slide-in-left var(--anim-duration) var(--anim-easing);
}
后续调整只需改变量值，无需进 keyframes 内部。多个组件共用同一套变量，风格也更统一。
用 class 组合触发不同阶段
用语义化 class 控制动画流程，比如：
-
is-entering→ 触发入场动画 -
is-active→ 触发悬停/高亮状态动画 -
is-exiting→ 触发退场动画（配合animation-fill-mode: forwards）
JavaScript 只需增删 class，CSS 负责执行，逻辑解耦，测试和回滚都更简单。
借助 will-change 和 transform 优化性能
拆分后容易忽略渲染层问题。确保每个小动画都：
- 优先使用
transform和opacity（触发合成层） - 对频繁动画的元素加
will-change: transform（但别滥用） - 用
prefers-reduced-motion媒体查询降级动画
拆得再细，卡顿或闪屏也会毁掉维护性——性能是可维护的前提。
不复杂但容易忽略：拆分不是目的，让每个动画「只做一件事、名字看得懂、改起来不牵连」才是核心。
