在线 CSS 动画生成器，可视化编辑关键帧、时长、缓动曲线与循环次数，实时预览动画效果并一键导出 @keyframes 与 animation 代码；浏览器本地运行，免费无需安装。
先填写或调整「动画名称」、「持续时间」、「缓动函数」、「循环次数」、「方向」、「填充模式」；修改输入或使用页面控件后查看结果区域。可先用「动画名称」中的示例 「myAnimation」熟悉输入格式，再替换成自己的数据。
本页提供「0.3s」、「0.5s」、「1s」、「1.5s」、「2s」、「3s」选项。先按实际输入和目标选择「持续时间」，再执行操作；比较两次结果时，保持其他参数一致，避免把不同模式的结果混在一起。
核对色值、尺寸、字体和导出格式。屏幕显示、浏览器渲染与印刷效果可能不同；应在最终使用的背景、设备或设计软件中再检查。
本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接，以及带外部地址的内容预览仍可能产生网络请求；“本地处理”并不表示整个网页完全没有网络活动。
先检查「动画名称」、「持续时间」、「缓动函数」是否完整，以及格式、单位和当前选项是否匹配。修改输入后，查看页面的结果或错误提示；可先用少量数据定位问题。
CSS 动画生成器(简版) · Css Button Generator · Css Clip Path Generator · CSS Grid 生成器(布局版) · 全部设计工具
