17370845950

应将重复的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- 属性动态覆盖：

• CSS 中用属性选择器匹配：[data-duration] { animation-duration: attr(data-duration); }
• 搭配 JS 可进一步支持 data-easing、data-iteration 等，无需改 CSS 文件

组合使用 + 工具辅助生成

一个元素常需多个动效（比如先淡入再上滑），直接空格拼接即可：

提交

推荐用 PostCSS 插件（如 postcss-animation）或 VS Code 扩展，输入 .anim-fade 回车自动补全完整 class 和对应 keyframes 声明，省去手写 boilerplate。

避免过度封装的提醒

不是所有动画都值得封装。以下情况建议保留内联或组件级样式：

• 仅在某页面出现 1 次、逻辑强耦合的定制动效
• 需要 JS 精确控制播放/暂停/重播的交互动画
• 涉及复杂 timeline 或多步骤状态切换（此时用 GSAP 或 Framer Motion 更合适）

通用 class 的价值在于「高频、低差异、意图明确」——抓住这点，CSS 动画就能既简洁又可控。