拆分复杂动画为职责单一的小动画是提升可维护性的最直接方式，按变换类型命名（如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 内部。多个组件共用同一套变量，风格也更统一。

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

用 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 媒体查询降级动画

拆得再细，卡顿或闪屏也会毁掉维护性——性能是可维护的前提。

不复杂但容易忽略：拆分不是目的，让每个动画「只做一件事、名字看得懂、改起来不牵连」才是核心。