CSS 动画案例库

挑一个案例调到满意，连 @keyframes 一起复制走，粘到项目里就是预览里的那个效果。

本地计算

选择工具

案例库、参数调节与缓动曲线
案例库 按分组浏览与搜索，点一下就能预览和复制

预览区的动画用的就是下方输出的那份 @keyframes。「悬停与交互」一组的动画原本由 :hover 触发，这里为了看清效果一直在循环，输出里仍是 :hover 规则。预览舞台在两种主题下都保持浅色 —— 它展示的是要贴进你项目里的效果，那份 CSS 通常落在浅色页面上。

分组

24 / 24 个案例

案例

点名字预览，点「复制」直接拿走这段 CSS

选中的案例

可直接选中复制
等待输入…
当前工具案例库
当前案例旋转圆环
播放状态播放中

常见问题

复制出来的 CSS 能直接用吗？

可以。预览区用的就是输出里的那份 @keyframes —— 页面把生成的动画定义实时写进一段 style 再挂到演示元素上，不存在「预览一套、导出另一套」的映射，所以看到什么粘贴出来就是什么。

为什么延迟为 0 时不写出来？

animation 简写里的两个时间值是有顺序的：第一个是时长，第二个才是延迟。写成「0s 1s」和「1s 0s」的意思完全不同，而且浏览器不会报错。延迟为 0 时直接省略，既不改变效果，也少一个容易改错的参数。

缓动曲线的 y 值能超过 1 吗？

能。y 超过 1 表示动画会先冲过终点再回落，回弹和甩尾效果就是这么做出来的。但 x 必须落在 0 到 1 之间，超出范围浏览器会判定整条曲线无效，连带整条 animation 一起失效，所以这里两个轴是分开限制的。

悬停类动画为什么挂在 :hover 上？

因为那才是它本来的用法。如果把悬停动画直接挂在元素本身，贴到项目里就会变成一进页面就跑一次，和你在预览里看到的不一样。案例库里的「悬停与交互」一组输出的是 :hover 规则，预览区为了让你看清效果才循环播放，页面上有相应说明。

会联网或上传我调的内容吗？

不会。页面不包含任何网络请求，也不生成图片，只是把参数拼成一段 CSS 文本。你挑的案例和调好的参数只存在浏览器本地，方便下次打开继续调。

把动画调到顺手，再把代码拿走

CSS 动画最费时间的从来不是写 @keyframes，而是反复改数字、刷新页面看效果：快一点慢一点、早一点晚一点、冲过头还是稳稳收住，差一点点观感就完全不同。这里把常用案例先摆出来，调到满意再复制走。

24 个常用案例

加载、入场、强调、悬停、氛围五组，覆盖日常界面里绝大多数需要动效的位置。

预览即输出

预览区加载的就是输出里的那份 @keyframes，不做二次映射，看到的就是拿走的效果。

六个参数可调

时长、延迟、缓动、循环次数、播放方向与填充模式，都在一屏里改完。

可视化缓动曲线

四个滑块改 cubic-bezier 的两个控制点，曲线实时重画，还能存成自定义缓动用回案例上。

带上元素自身样式

输出的片段除了动画，还包含演示元素的基础样式，贴过去就是一个能跑的例子，不用自己补。

注明触发方式

悬停类案例输出 :hover 规则并在页面上标明，避免贴过去变成一进页面就跑一次。

动效敏感者兜底

无限循环的案例附带 prefers-reduced-motion 规则，系统开了减少动效就自动静止。

本地运行

不联网、不上传、不生成图片，参数只留在你的浏览器里。

三个容易踩的地方

  1. 简写里两个时间值的顺序。第一个是时长、第二个是延迟，写反了动画会先等再跑。这类错误浏览器完全不报，只能靠看效果发现，所以本页在延迟为 0 时干脆不输出第二个值。
  2. 缓动曲线的 x 超出范围整条失效。x 必须在 0 到 1 之间，写个 1.2 进去，浏览器会把整条 cubic-bezier 判为无效 —— 不是曲线变形，是动画直接不动。
  3. 拿会触发重排的属性做动画。动 width、height、top、left 会牵动整个布局，元素一多就掉帧。优先动 transform 与 opacity，这两类能交给合成层，代价小得多。