带预设和可视化编辑器的CSS动画生成器
CSS动画生成器让你可视化地构建@keyframes动画，无需手写代码。选一个现成预设，调好时间和缓动，再把整洁、可直接投入生产的CSS复制到你的样式表里。
它专为想快速做出精致动效的前端开发者和UI设计师而生：原型设计一个进入效果、试验各种缓动曲线，或微调一个循环转圈。你可以从四大类共35个预设中挑选，调整每一项动画属性，并打开关键帧编辑器亲手雕琢每一步。实时预览会随你的操作即时回放动画。
如何制作CSS动画
选择一个预设
点击分类标签——进入、退出、强调或循环——再点任意预设即可应用。预览会立即播放，所有属性和关键帧也会随之更新。
调整属性
精细调校时长（0.1秒到5秒）、延迟（0秒到5秒）、缓动、循环次数（1、2、3或infinite）、方向（normal、reverse、alternate）和填充模式（none、forwards、backwards、both）。
编辑关键帧（可选）
打开关键帧编辑器，雕琢每一个步骤。在每个百分比处设置opacity、translateX、translateY、rotate和scale，点击添加关键帧即可插入一个带插值数值的新步骤。
预览并复制
用播放、暂停和重播来检查动效，并切换预览形状（方块、圆形、文字）和背景颜色，在不同场景中测试。觉得满意后，点击复制获取完整CSS。
功能特点
35个动画预设
四大类共35个预设：进入、退出、强调和循环，每个都配有合理的默认时间。
完整属性控制
在同一个可视化控制面板里设置时长、延迟、缓动、循环次数、方向和填充模式。
9种缓动选项
除了标准曲线，还有自定义的bounce、elastic、smooth以及用于逐帧效果的steps缓动。
可视化关键帧编辑器
时间轴展示每一个关键帧；点击任意步骤即可编辑opacity、translateX/Y、rotate和scale，并添加或删除步骤。
智能插值
新关键帧会根据相邻步骤自动填充，让插入的帧保持平滑，而不会跳变。
实时预览
每次改动设置时，都能用播放、暂停和重播控制实时观看动画回放。
形状与背景选项
在方块、圆形或文字元素上预览，并设置自定义背景颜色，在不同场景中测试动效。
整洁代码输出
获取完整的@keyframes代码块加上animation简写，实时更新，一键复制到剪贴板。
深色模式
内置深色主题，让编辑器在弱光环境下也用得舒适。
在你的浏览器中运行
所有处理都在客户端完成，你的动画始终留在自己的设备上，不向服务器发送任何数据。
常见问题
怎么制作一个CSS动画？
从某个分类里选一个预设，调整时长、缓动和其他属性，再视需要打开关键帧编辑器细调每一步。实时预览满意后，点击复制即可获取完整CSS。无需安装，也无需注册。
什么是CSS关键帧和@keyframes？
@keyframes规则定义了动画的各个命名阶段，每个关键帧都设在0%到100%之间的某个百分比上。浏览器会在动画时长内对这些阶段之间进行插值。本生成器会替你构建@keyframes规则，并通过animation简写来应用它。
我可以让哪些CSS属性产生动画？
关键帧编辑器可控制opacity、translateX、translateY、rotate和scale——这些属性在大多数浏览器中都由GPU加速，运动更流畅。部分预设还用到更丰富的变换，如scaleX、scaleY、skewX、skewY和rotateX，它们也会一并写入生成的代码。
填充模式（fill mode）有什么用？
填充模式控制元素在动画前后的样子。none会让它回到原始样式，forwards保留最后一帧的样式，backwards在延迟期间应用第一帧，both则兼具两者。对于进入动画，forwards通常能让元素淡入后继续保持可见。
我该用哪种缓动函数？
进入用ease-out（起步快、收尾缓），退出用ease-in（起步缓、收尾快），强调和循环用ease-in-out。持续转圈选linear，想要俏皮、抓眼球的感觉时就用bounce或elastic。
怎么做一个循环（infinite）播放的动画？
把循环次数设为infinite即可。循环类预设——如Spin、Float和Wave——本就使用无限循环，所以会自动持续播放。把infinite和alternate方向搭配使用，能创造平滑的来回往返运动。
CSS动画和过渡（transition）有什么区别？
过渡只在两个状态之间为单次变化制作动画，且需要悬停或切换类名等触发条件。关键帧动画则可以定义许多中间阶段、可以循环，还能自行启动。本工具专注于@keyframes动画，让你对多步骤运动有更精细的掌控。
怎么复制生成的CSS？
点击代码面板上的复制按钮。它会把完整输出——@keyframes代码块加上一条带animation简写的.element规则——复制到剪贴板，可直接粘贴进你的样式表。输出使用所有现代浏览器都支持的标准属性，无需任何厂商前缀。
还没有评论，快来发表第一条！