介绍

做页面时想给元素加一个「淡入上浮」，通常的流程是：搜一篇讲 @keyframes 的文章 → 抄一段代码 → 改时长 → 刷新看效果 → 不对再改。一轮下来十分钟过去了，只为了一个 0.6 秒的动画。

CSS 动画实验室 把这段流程压缩成三步：在动画库里点一个预设 → 用滑块调参数、实时看效果 → 复制 CSS 代码贴进项目。所有动画都是标准 CSS，不需要引入任何动画库。

动画库（21 个预设）

淡入与位移：fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight 缩放与旋转：zoomIn、zoomOut、rotateIn、rollIn、flip、flipInX 强调与反馈：bounce、shake、pulse、heartbeat、swing、wobble、jello、rubberBand、tada、float

这套命名与常见的动画库（如 animate.css）基本对应，所以如果你之前用过那套类名，迁移过来几乎没有学习成本。

可调参数

  • 时长（duration）：动画跑完一轮的时间，单位秒。
  • 延迟（delay）：开始前等待多久，用来做元素依次入场。
  • 次数（iteration）：1 / 2 / 3 / 5 次或无限循环。
  • 方向（direction）：normal 正向、reverse 反向、alternate 交替、alternate-reverse 反向交替。
  • 填充模式（fill-mode）：none / forwards / backwards / both，决定动画结束后元素停在哪一帧。
  • 缓动函数（timing-function）：linear、ease、ease-in、ease-out、ease-in-out，以及三个常用预设——cubic-bezier 回弹、cubic-bezier 平滑、steps(5) 步进；也可以直接填 x1 / y1 / x2 / y2 自定义贝塞尔曲线。

使用教程

  1. 打开页面，在下方网格里点击任意动画，预览区立刻播放。
  2. 在左侧「参数」面板调时长、延迟、次数、方向、填充模式。
  3. 缓动函数是最影响「手感」的一项：想要俏皮就选回弹，想要沉稳就选平滑或 ease-out。
  4. 想精确控制节奏时，填自定义 cubic-bezier 的四个参数，逐点微调。
  5. 满意后点「复制 CSS」拿到当前动画的代码，或点「全部复制」一次拿走整套。需要重看效果时点「重播」，对比多个方案时可以「暂停」定格。

参数怎么选（经验值）

  • 入场动画：时长 0.3–0.6s，ease-out。再长会显得页面拖沓。
  • 列表依次出现：每个元素延迟递增 0.05–0.1s（delay = index × 0.08s），超过 0.15s 就会明显感到卡顿。
  • 强调型动画（shake / pulse / tada）：时长压到 0.5s 以内，次数 1 次。循环播放的强调动画很快就会让人烦躁。
  • 加载中状态：pulse 或 heartbeat 配合 infinite 循环，时长 1–1.5s。
  • 需要动画结束后保持终态：fill-mode 必须选 forwards，否则元素会跳回起始状态。

无障碍与性能提醒

  • 页面里大量使用位移和缩放动画时，记得给用户留一个关掉的开关；如果站点已经有 prefers-reduced-motion 适配，这里的动画同样应当遵守该媒体查询。
  • 优先动画 transform 和 opacity，它们不触发重排，性能最好；避免动画 width、top、left 这类属性。
  • 动画元素多时加 will-change: transform，但不要滥用，否则会占用过多合成层内存。

常见问题 FAQ

Q: 复制的代码需要引入库吗？

不需要。复制出来的是标准 @keyframes 加一条 animation 简写声明，直接贴进你的样式表即可，不依赖任何第三方库。

Q: 缓动函数里的「回弹」和「平滑」具体是什么？

是两个预置的 cubic-bezier 参数组：回弹（overshoot）会让元素越过终点再回来，观感活泼；平滑（smooth）在起止两端都做缓入缓出，观感克制。需要更精细的控制时，直接填四个参数自定义。

Q: 动画播放完了元素又跳回原样？

把「填充模式」改成 forwards（或 both）。默认的 none 表示动画结束后不保留最后一帧的样式。

Q: 能用在 Vue / React 项目里吗？

可以。它产出的是纯 CSS，与框架无关；在 Vue 的 <transition> 或 React 的 className 切换里直接用即可。

相关工具