真的全程在浏览器里跑吗?

是的。编辑器、实时预览、CSS 输出全部是浏览器里跑的纯 JavaScript + 原生 CSS 动画。不上传、不记录,断网也照常用。

为什么我项目里的元素跟这里预览的不一样?

99% 是属性缺失或被覆盖。CSS 只动画那些起止值都明确定义的属性,而目标元素上的 transform 很容易被另一条优先级更高的规则盖掉。把工具生成的 .element 块原样粘到一个独立元素上,确认没有别的 animation 或 transform 在跟它抢。

fill-mode 的 forwards 和默认有什么区别?

默认情况下动画一结束元素就弹回播放前的样式。forwards 会让 100% 关键帧的计算值在结束后保持住,backwards 在 delay 期间套用 0% 的值,both 两头都套。入场动画想让元素停在终点而不是闪回原位时,用 forwards。

除了 transform 和 opacity 还能动画别的属性吗?

这个工具内置 transform、opacity、background-color 三种,因为它们覆盖了大部分 UI 动效且代价低。transform 和 opacity 走 GPU 合成,动画时不触发布局和重绘,所以我们优先推它们。background-color 用于颜色过渡;生产环境别动画 width/height/top/left 这类布局属性,会拖垮主线程。

怎么让动画无限循环?

把 iteration-count 设为 infinite。再配合 direction 设 alternate,就能来回往复,而不是每次循环从 100% 硬跳回 0%。

给设计系统做一条可复用的入场动画

你要一条所有卡片复用的"上浮淡入"入场。加三个关键帧:0% 设 opacity 0、translateY 16px,100% 设 opacity 1、translateY 0。时长设 400ms,缓动选 ease-out 预设,fill-mode 设 forwards 让卡片落位后停住。复制 @keyframes 块,命名 `fade-up`,放进全局样式表。之后每个 `.card` 只需要 `animation: fade-up 400ms ease-out both`。实时预览先帮你确认缓动手感对了,再把数值固化成 token。

不用 GIF 就做一个加载转圈

转圈本质就是从 0deg 旋到 360deg 无限循环。加一个 0% 帧设 rotate 0deg、一个 100% 帧设 rotate 360deg,iteration-count 设 infinite,缓动设 linear,时长 800ms。预览立刻转起来,凭眼睛调速度。复制输出,你就有一个纯 CSS 转圈,比任何 GIF 都清晰,换色只改一个 CSS 变量,不走资源构建,不多发一个请求。

给 CTA 调一条"脉冲"吸引注意的动画

市场希望主按钮轻轻脉动。加 0% scale 1、50% scale 1.06、100% scale 1,direction 设 normal,iteration-count 设 infinite, 缓动用柔和的 ease-in-out。把时间轴拖到 50% 处,确认峰值缩放看得见又不刺眼。预览用的就是浏览器实际会用的 GPU 合成 transform,所以你看到的就是用户在真实 CTA 上逐帧看到的。

把 Figma 规格里的动画交付成可粘贴的 CSS

设计师把动效描述成"从左侧滑入,轻微过冲,再落定"。翻译成关键帧:0% translateX -100%,70% translateX 4%,100% translateX 0,时长 500ms,缓动选带回弹感的 cubic-bezier 预设。在预览里确认过冲量读起来对,然后把生成的 CSS 直接粘进 PR。不用再为"过冲多少"来回扯,数值就写在关键帧里。

排查动画为什么是跳变而不是缓动

一条现成动画每次循环结尾都会硬跳。在这里逐帧重建它,把 direction 切成 alternate,跳变消失了,因为元素现在是正放再倒放,而不是从 100% 瞬移回 0%。把生成的简写跟代码库里那条对一下;缺的那块八成是 `direction: alternate`,或者倒放那程的 `timing-function` 不匹配。现在你手里就有改对的、能跑的 CSS。

CSS Keyframes 动画生成器

可视化编排 @keyframes:增删关键帧、设 transform/opacity/颜色、实时预览、一键复制可上线 CSS,浏览器本地

本地处理
分类颜色设计
适合把视觉想法转成可复用的颜色值。

关键帧

正在编辑关键帧 · 0%

位置: 0%

变换

平移 X

平移 Y

缩放

旋转

斜切 X

斜切 Y

不透明度: 1

背景色

动画参数

名称

时长 (ms)

缓动

延迟 (ms)

次数

无限

方向

填充模式

实时预览

编辑某一帧, 看它跑, 复制 CSS。优先用 transform + opacity, 动画不卡顿。

CSS 输出

@keyframes my-animation {
  0% {
    transform: none;
  }
  50% {
    transform: translate(0px, -40px) scale(1.2);
  }
  100% {
    transform: none;
  }
}

.element {
  animation: my-animation 1.5s ease-in-out infinite alternate none;
}

这个工具能做什么

一个可视化编辑 CSS @keyframes 动画的工具。从 0% 到 100% 自由增删关键帧,每一帧上单独设 transform(平移 / 缩放 / 旋转 / 斜切)、opacity、背景色。动画就跑在编辑器旁边一个真实元素上, 所见即所得:可暂停、可重播、可在时间轴上拖动定格查看某一帧。动画参数全可调:时长 duration、缓动 timing-function(ease / linear / steps,外加一组 cubic-bezier 预设)、延迟 delay、播放次数 iteration-count(含 infinite 无限循环)、方向 direction (正放 / 倒放 / 交替)、填充模式 fill-mode(none / forwards / backwards / both)。右侧输出面板给出完整可直接粘贴的代码: @keyframes 规则 + .element { animation: ... } 简写,现代语法、无冗余前缀。所有配置都写进 URL,"分享链接"打开就是你刚编排好的那条动画;上次的配置也用 localStorage 记住。100% 浏览器本地: 不上传、不打点、不需要登录。

工具细节

输入: 文本 + 数值 + 结构化内容; 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
输出: 即时结果 + 复制 + 预览; 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
隐私: 浏览器本地处理; 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
保存 / 分享: 可分享链接状态; 关键设置会进入 URL，复制链接后别人能复现同一组参数。
性能预算: 首屏 JS ≤ 14 KB; 没有声明 WASM 依赖，适合快速打开和移动端使用。
适用场景: 颜色设计 · 设计师; 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。

怎么用

1. 输入

把内容粘贴或拖入工具面板。
2. 处理

点击按钮,在浏览器内本地处理,文件不上传。
3. 复制 / 下载

一键复制结果或下载到本地。