应将重复的CSS动画逻辑抽成语义化可复用class，如.animate-fade-in、.animate-slide-up等，统一时长0.3s和fill-mode:both；支持data属性动态控制参数；允许多类组合；推荐工具辅助生成；仅对高频低差异动效封装。
把重复的 CSS 动画逻辑抽成可复用的 class，能大幅减少代码量、提升维护性。关键不是写更多动画，而是用更少、更清晰的类名表达常见动效意图。
按动效类型封装基础 class
不要为每个元素单独写 @keyframes，而是定义语义化、用途明确的动画类：
- .animate-fade-in：淡入（opacity 0→1，ease-out）
- .animate-slide-up：从下往上滑入（transform: translateY(20px) → 0）
- .animate-bounce：轻弹效果（配合 cubic-bezier(0.28, 0.84, 0.42, 1)）
- .animate-pulse：柔和缩放脉冲（scale: 0.95 → 1 → 0.95）
所有动画统一使用 duration: 0.3s、fill-mode: both，避免每次重复声明。
用 data 属性控制参数（进阶灵活）
固定时长/延迟不够用？用 HTML 的 data- 属性动态覆盖：
立即学习“前端免费学习笔记（深入）”；
<div class="animate-fade-in" data-duration="0.5s" data-delay="0.2s"></div>- CSS 中用属性选择器匹配：
[data-duration] { animation-duration: attr(data-duration); } - 搭配 JS 可进一步支持
data-easing、data-iteration等，无需改 CSS 文件
组合使用 + 工具辅助生成
一个元素常需多个动效（比如先淡入再上滑），直接空格拼接即可：
<button class="animate-fade-in animate-slide-up">提交</button>
推荐用 PostCSS 插件（如 postcss-animation）或 VS Code 扩展，输入 .anim-fade 回车自动补全完整 class 和对应 keyframes 声明，省去手写 boilerplate。
避免过度封装的提醒
不是所有动画都值得封装。以下情况建议保留内联或组件级样式：
- 仅在某页面出现 1 次、逻辑强耦合的定制动效
- 需要 JS 精确控制播放/暂停/重播的交互动画
- 涉及复杂 timeline 或多步骤状态切换（此时用 GSAP 或 Framer Motion 更合适）
通用 class 的价值在于「高频、低差异、意图明确」——抓住这点，CSS 动画就能既简洁又可控。
