长风破浪会有时，直挂云帆济沧海。 —— 李白《行路难》
CSS动画在线生成器
@keyframes关键帧可视化编辑 / 实时预览 / 预设动效模板 / 一键复制动画代码
关键帧
%
%
%
生成的CSS代码
CSS动画说明
CSS动画通过@keyframes定义关键帧，配合animation属性控制播放。支持设置时长、缓动函数、循环次数、方向和填充模式。本工具提供可视化编辑和预设模板，快速生成动画代码。如需静态变换效果可使用Transform预览工具。
常见问题
CSS动画生成器怎么使用？
通过可视化编辑@keyframes关键帧属性（如transform、opacity等），选择动画时长、缓动函数和预设模板，实时预览动画效果，满意后一键复制生成的CSS代码即可。
预设动画模板有哪些？
内置多种常用动画模板，包括弹跳（bounce）、旋转（rotate）、淡入淡出（fadeIn/fadeOut）、滑动（slideIn/slideOut）等，点击即可预览效果。
生成的CSS动画代码兼容性如何？
生成的代码使用标准的CSS @keyframes和animation属性，兼容所有现代浏览器（Chrome、Firefox、Safari、Edge），无需添加浏览器前缀。