CSS动画生成器
在线CSS动画生成器，支持关键帧可视化编辑、实时预览与代码复制，适用于交互动效开发、样式调试与教学演示。
动画基础设置
关键帧编辑
%
%
预设动画
实时预览
动画元素
方形
圆形
三角
时间轴
0%25%50%75%100%
0%
100%
关键帧标记会实时同步，播放时进度指示器会跟随动画变化
CSS代码
@keyframes myAnimation {
0% {
transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
opacity: 1;
background-color: #3b82f6;
}
100% {
transform: translateX(100px) translateY(0px) scale(1.5) rotate(360deg);
opacity: 0.5;
background-color: #ef4444;
}
}
.element {
animation: myAnimation 2s ease 0s 1 normal both;
}CSS动画生成器使用说明
CSS动画生成器用于可视化编辑 keyframes 关键帧，支持参数调节、实时预览和代码复制，适合日常前端动效开发与教学演示。
这是什么工具？
它可以把动画名称、时长、缓动、循环和关键帧参数整合成可直接使用的 CSS 动画代码，帮助你快速验证交互动效并减少手写错误。
核心功能
- 支持关键帧时间点、位移、缩放、旋转、透明度和背景色的可视化编辑。
- 支持缓动函数、循环次数、动画方向、持续时间和延迟时间快速配置。
- 支持淡入淡出、弹跳、摇摆等常见预设动画一键套用并继续微调。
- 支持主预览与多形状预览同步播放，便于观察动画在不同元素上的表现。
- 支持自动生成 keyframes 与 animation 声明并一键复制。
使用步骤
- 先设置动画名称、时长、延迟、缓动函数、循环次数与方向。
- 在关键帧编辑区调整每个时间点的位移、缩放、旋转、透明度与颜色。
- 点击播放、暂停或重置，观察预览区动画是否符合预期。
- 如需快速开始，可先应用预设动画再按需求微调参数。
- 确认效果后复制代码，粘贴到项目样式文件或组件中。
应用场景
- 网页按钮、卡片、提示层等交互动效快速打样
- 活动页首屏元素入场动画和循环动画调试
- 设计交付后的动效还原与前端联调
- 课堂教学中演示 CSS keyframes 工作机制
使用建议
- 关键帧时间点建议按动画节奏分布，避免过密导致变化突兀。
- 循环动画建议先设置有限次数验证细节，再改为 infinite。
- 当位移和旋转同时较大时，可适当降低缩放变化，提升观感稳定性。
- 上线前请在移动端和桌面端分别预览，确认动效节奏一致。
隐私说明
本工具不会上传你的动画参数和代码，所有计算与渲染都在浏览器本地完成。