CSS 动画生成器
内置 20+ 动画预设，可视化编辑关键帧与缓动曲线并输出 CSS。
隐私安全：所有处理均在您的浏览器本地完成，数据绝不上传预设库
悬停缩略块预览动效，点击载入。
实时预览
关键帧属性
关键帧时间轴
拖拽节点调整百分比，点击选中后在上方编辑属性缓动曲线
控制点横坐标限定 0~1，纵坐标可超出 0~1 以做回弹；选中控制点后可用方向键微调。
时间参数
迭代次数可填整数或 infinite；时长与延迟单位为秒。
CSS 输出
历史记录
最多保留 50 条，仅保存在本机浏览器，不会上传。
配置导入 / 导出
工作原理
- 1内部以「动画配置 + 关键帧数组」作为唯一状态。每个关键帧的位移、旋转、倾斜与缩放会被聚合成一条 transform 声明，避免多条 transform 声明相互覆盖——这是手写关键帧最常见的问题。
- 2预览使用真实 CSS 动画：把生成的 @keyframes 注入页面中的一个动态样式表，再把 animation 简写规则应用到预览元素，保证预览效果与输出代码完全一致。
- 3仅修改 @keyframes 内容、或 animation 简写中某个属性的值时，浏览器会复用同名动画继续播放；只有改动动画名称或属性列表时，工具才会通过读取元素宽度强制重排来重启动画。因此拖拽编辑关键帧与缓动曲线时，预览是连续平滑的。
- 4缓动曲线以 cubic-bezier(x1, y1, x2, y2) 表达：两个控制点的横坐标必须落在 0 到 1 之间（越界整条曲线无效），纵坐标允许超出该区间以产生回弹与超调；曲线用 SVG 三次贝塞尔绘制，控制点可拖拽。
- 5输出严格按 name duration timing-function delay iteration-count direction fill-mode play-state 的顺序拼接 animation 简写，顺序错误会导致浏览器解析失败，因此由代码统一生成而不依赖手工拼接。
常见问题
复制的 CSS 代码可以直接用吗？
可以。输出的 @keyframes 与 animation 规则粘贴到你的样式表或页面内联样式中即可生效。若选择的是完整规则，记得把示例选择器 .animated-element 换成你自己的类名或元素选择器。
为什么动画结束后元素会闪回初始状态？
这是 animation-fill-mode 为 none 时的正常行为：动画结束后元素回到未应用动画时的样式。希望保留结束状态请把填充模式改为 forwards 或 both。当你选择 none 且动画非无限循环时，本工具会给出提示。
拖动缓动曲线控制点时，为什么横坐标被限制在 0 到 1？
cubic-bezier 的两个控制点横坐标代表时间进度，必须在 0 到 1 之间，越界会导致整条缓动曲线无效。纵坐标代表输出进度，可以超出 0 到 1，正是靠它做出回弹与超调效果，所以只有横坐标会被限制。
预览里的播放状态和输出的代码一致吗？
不完全一致。预览始终以运行状态播放，方便你随时观察动效；播放状态参数只写入输出的代码中。如果你需要输出一个初始暂停的动画，把播放状态改为 paused 即可。
悬停触发的预览为什么要用一块更大的热区？
因为动画本身会让元素位移或缩放，若把悬停判断直接绑在元素上，鼠标很可能在动画过程中移出元素而导致动效中断。工具因此改用外层固定热区来判定悬停。输出代码中的 :hover 依然写在元素自身的选择器上。
历史记录和配置会保存到哪？数据会上传吗？
全部在浏览器本地完成，零网络请求。历史记录保存在浏览器的 localStorage 中，最多保留 50 条，不会上传到任何服务器；清除浏览器数据或更换设备后会丢失，需要长期保存请使用导出配置下载 JSON 文件。