设计

CSS 动画生成器

从现成的淡入、滑入、缩放、旋转和提醒动效中创建 CSS 关键帧动画。你可以一边看实时播放的演示元素，一边调节时长、延迟、缓动函数、循环次数、播放方向和填充模式，然后复制完整的 @keyframes 关键帧与 animation 规则放进样式表。它适合入场动画、加载器、悬停反馈、通知提示和首屏区块，所有生成过程都在浏览器本地完成。

  • 从淡入、滑入、缩放、旋转和提醒等动效预设中直接挑选
  • 实时调节时长、延迟、缓动函数、循环次数、播放方向和填充模式
  • 演示元素循环播放当前动画，并提供重播与暂停控制
  • 复制完整的 @keyframes 关键帧加 animation 简写，可直接粘贴
  • 全部在浏览器本地运行，设计过程中不上传任何内容
工具/CSS 动画生成器
向上淡入
6
1000ms
0ms
fadeInUp
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animated-element {
  animation: fadeInUp 1000ms ease 0ms infinite normal both;
}
快捷操作

功能简介

把关键帧和它产生的动效并排放在一起，让动画变成可以一边看一边调的东西，而不是写一段 CSS 再反复刷新才能确认效果。

  1. 01

    精选效果库

    从分好组的具名效果出发——淡入、滑入、缩放、引起注意和旋转，而不必从空白文件里逐帧手写关键帧。

  2. 02

    循环实时预览

    演示元素会循环播放所选动画，并支持重播与暂停，让你判断真实的动效本身，而不是它的文字描述。

  3. 03

    完整的动画控制

    调节时长、延迟、缓动函数、循环次数、播放方向和填充模式，每次改动都会立即生效。

  4. 04

    标准、可直接复制的输出

    生成结果是真实的 @keyframes 关键帧和 animation 简写，使用标准 CSS 属性名，可直接粘贴进任意样式表。

  5. 05

    内置缓动选择

    从 CSS 关键字或一条弹簧感的 cubic-bezier 中选择，让同一组关键帧呈现平滑、利落或弹性的不同手感。

  6. 06

    隐私优先

    效果库、预览和 CSS 生成全部在浏览器本地运行，未发布的界面设计绝不会离开你的设备。

如何使用

把对元素该如何出现或如何反应的模糊想法，变成一段完整、可直接复制的 CSS 动画。

  1. 01

    从效果库中挑选一个与你设想的动效最接近的动画。

  2. 02

    设置时长和延迟，直到动画播放的节奏感觉合适。

  3. 03

    选择一个缓动函数，观察它如何改变同一组关键帧的手感。

  4. 04

    设置循环次数、播放方向和填充模式，控制动画如何重复与收尾。

  5. 05

    用重播反复观看动效，再把 @keyframes 和简写复制进你的样式表。

功能说明

动画不只是一条缓动曲线，因此这个生成器同时覆盖定义动效的关键帧，以及控制其如何运行的各项属性。

  • 一套具名效果库，分为淡入、滑入、缩放、引起注意和旋转等分组
  • 循环播放的演示元素，让每个效果以真实动效而非名称来判断
  • 重播与暂停控制，便于在调整时反复观看或冻结动画
  • 时长和延迟滑块，改动的瞬间即更新预览
  • 缓动函数预设，覆盖 CSS 关键字以及一条弹簧感的 cubic-bezier
  • 循环次数包含真正的无限循环，适合环境式与循环类效果
  • 播放方向控制，支持 normal、reverse、alternate 和 alternate-reverse
  • 填充模式控制，让元素在运行前后保持起始或结束状态
  • 输出将完整的 @keyframes 关键帧与对应的 animation 简写配成一对
  • 全部在浏览器本地生成，让机密的界面动效保持私密

适合哪些场景

动画能引导注意、传达状态、增添质感，但用哪个效果取决于正在发生什么以及为什么。把它放到真实元素上试一试，是决定是否合适最快的办法。

  1. 入场动画

    内容加载或滚动进入视口时，用淡入、滑入和缩放效果让元素平滑地出现在屏幕上。

  2. 提醒与反馈

    抖动、脉冲和弹跳能把视线引向一处错误、一条新消息，或一个需要操作的按钮。

  3. 加载与环境式动效

    无限旋转或脉冲让加载器和空闲指示器保持活力，又不会强行要求用户去注意它们。

  4. 悬停与交互质感

    悬停或点击时一个快速的缩放或摇摆，让可交互元素显得灵敏且经过用心设计。

  5. 提示与通知

    让一条提示从边缘滑入并稳稳落定，新消息读起来像是「到达」而不是凭空「出现」。

  6. 营销与首屏区块

    落地页上错落的淡入和滑入，让首屏区块有了节奏感，也有了被精心设计过的气质。

  7. 学习 CSS 动画

    把生成的 @keyframes 和实时结果对照着看，是理解动画语法如何映射到动效的清晰方式。

  8. 搭建动效系统

    固定下一小组可复用的具名动画，让整个产品的动效共享同一种一致的手感。

延伸阅读

动画的时间感由缓动塑造，可以用 三次贝塞尔曲线生成器 进一步打磨曲线本身；当一个效果同时改变高度层级时，再搭配来自 阴影生成器 的阴影深度，让动效与阴影一起变化，而不是互相打架。

使用建议

动画很容易用过头，因此一些习惯能让动效保持目的明确且一致，而不是杂乱或令人分心。

  • 尽量动画化 transform 和 opacity，它们是浏览器最容易流畅处理的属性。
  • 入场和交互动画保持简短，大约 200 到 500ms，让界面用起来依然快捷。
  • 把抖动、弹跳这类引起注意的效果留给真正需要被注意的时刻。
  • 只在加载器等环境式动效上使用无限循环，不要用在用户正在阅读的内容上。
  • 让缓动函数匹配意图，入场用 ease-out，退场用 ease-in。
  • 当元素应在动画结束后保持结束状态时，使用 forwards 或 both 填充模式。
  • 尊重减少动态效果的偏好，为提出该需求的用户弱化或移除大幅度的运动。
  • 固定使用一小组具名动画，而不是为每个组件都写一套独立的关键帧。

边界与注意事项

这个工具专注于生成 CSS 关键帧动画，因此有几个相关领域是有意排除在外的。

  • 它生成的是 CSS @keyframes 动画，而非 JavaScript 或库驱动（如弹簧物理）的动画。
  • 效果作用于单个演示元素，因此多个元素的错落与时序请在你自己的布局中确认。
  • 它输出的是动画本身，而非周边布局，定位和尺寸来自你已有的 CSS。
  • 预览使用固定的演示元素，请在真实组件的实际尺寸上确认手感。
  • 滚动触发和视图时间轴动画属于另一套机制，此处不生成。
  • 观感的流畅度还取决于帧率和页面上其他重绘内容，这一点本编辑器并不衡量。

常见问题

在制作 CSS 动画、把效果变成可上线的样式表代码时，最常遇到的一些问题。

什么是 CSS 关键帧动画？

它是用 @keyframes 规则定义的动画，规则中列出属性在时间轴上如何变化，再通过 animation 属性应用到元素上，控制时长、缓动、重复次数等参数。

生成的 CSS 可以直接用于生产环境吗？

可以。输出是标准的 @keyframes 关键帧和 animation 简写，无需修改即可粘贴进任意样式表。你也可以重命名关键帧或选择器以贴合自己的代码。

填充模式（fill mode）有什么作用？

animation-fill-mode 控制元素在动画运行前后的样子。forwards 保持最后一帧，backwards 在延迟期间应用第一帧，both 则两者兼具。

如何让动画一直循环播放？

把循环次数设为 infinite。再配合 alternate 方向，让动画每个周期反向播放而不是跳回起点，适合脉冲和环境式动效。

如何生成 CSS 淡入或滑入动画？

选择淡入或滑入预设，调整时长和缓动直到预览手感合适，然后复制生成的 @keyframes 与 animation 规则。粘贴到样式表前，可以把关键帧名称和选择器改成项目里的命名。

哪些属性最适合做动画？

transform 和 opacity 性能最好，因为浏览器无需昂贵的布局或绘制即可处理。效果库优先使用它们，以保持动效流畅。

可以改变一个效果的缓动吗？

可以。选择任意缓动函数，包括一条弹簧感的 cubic-bezier，同一组关键帧会随你选择的曲线呈现平滑、利落或弹性的手感。

设计过程中会上传任何内容吗？

不会。效果库、实时预览和 CSS 生成全部在浏览器本地运行，因此该工具适合处理未发布的产品界面和机密的界面动效。

更多相关工具

动效只是精致界面的其中一层。动画定下来之后，再打磨缓动与阴影深度，让时间、层级和运动都读起来像同一套经过深思的设计。