把 @keyframes 关键帧摊成一条可点选的时间轴，改位移、缩放、旋转与缓动，右侧方块立即播放，下方同步生成可直接粘贴的 CSS。
首屏即可改参数： 毫秒 · 全部本地计算
生成一次动画后点下方按钮，点击会先弹出点选验证码，通过后才发出请求。
| 方案名 | 时长 | 缓动 | 循环 | 帧数 | 备注（转义后展示） |
|---|
| 关键帧口径 | 一条动画由 @keyframes 名称 与若干百分比关键帧组成；本页用可视化时间轴编辑 0%～100% 的节点，节点上的位移、缩放、旋转、透明度会写进同一条 CSS 规则。 |
|---|---|
| 时间函数 | duration 是整轮时长，timing-function 决定节点之间如何插值；ease / linear / ease-in-out / cubic-bezier 只改速度曲线，不改起止值。 |
| 循环与方向 | iteration-count 支持 1～N 次与 infinite；direction 的 alternate 会在偶数轮倒放，配合 fill-mode: both 可让元素停在末帧而不是弹回起点。 |
| 前缀与兼容 | 现代浏览器已无需 -webkit- 前缀；本页输出的 animation 简写与 @keyframes 均为标准语法，附一份可直接粘贴的 HTML 结构示例。 |
| 可访问性 | 系统开启「减少动态效果」时应关闭非必要动画；页面给出 prefers-reduced-motion 媒体查询片段，避免前庭不适用户被持续动画干扰。 |
| 批量与转义 | 批量表最多 20 组参数，名称含引号、逗号、换行时按 CSV 双引号转义导出；代码框与备注一律先做 HTML 转义再渲染，不执行注入内容。 |
写 @keyframes 最费时间的不是语法，而是反复刷新看效果。这个 CSS动画生成器 把关键帧摊成一条可点选的时间轴：改位移、缩放、旋转、透明度与缓动，右侧方块立即播放，下方 CSS 与 HTML 同步生成，复制即可用。内置淡入、弹跳、呼吸、摇晃、滑入五套预设，支持批量参数对照、自定义贝塞尔、代码转义校验与 CSV 导出。
所有参数都在浏览器本地计算与预览，不上传任何代码；动画名称只允许字母、数字、连字符与下划线，非法字符会即时提示并回退到上一次合法值。
transition 需要状态变化来触发，只有起止两态；animation 绑定 @keyframes，可以有任意多个中间帧、自动播放、循环与倒放。要做入场、循环提示、加载效果，用本页生成的 @keyframes 更合适。
把代码区上半段 @keyframes 整段粘进样式表，再把 animation 那一行加到目标元素的选择器里；页面同时给了一段最小 HTML 示例，改类名即可。若用了自定义名称，记得两处名称保持一致。
四个数依次是 P1x、P1y、P2x、P2y，其中 x 必须在 0～1 之间，y 可以略微超出以做回弹。例如 0.34、1.56、0.64、1 是常见的轻微过冲。本页会校验数值范围，填错会阻止生成并给出提示。
常见原因是同时改了 width、height、top、left 或 box-shadow，这些属性会触发布局与重绘。优先只改 transform 与 opacity，本页的关键帧属性面板也是按这个口径设计的。
可以把几组不同时长、缓动、循环次数的方案并排记录，横向比较节奏差异，再一次性导出 CSV；导出时对名称里的逗号、引号、换行做标准双引号转义，Excel 打开不会串列。
持续循环的位移、缩放动画可能干扰阅读，也可能让前庭敏感用户不适。代码区附带 prefers-reduced-motion 媒体查询，把它一起粘贴就能在系统开启「减少动态效果」时自动停用动画。
现在只有你自己能看到这条留言（已标上「待审核」），管理员审核通过后才会展示给所有人～
还没有留言，来抢沙发吧！