关于此工具
选择一个带有时长、缓动函数和循环次数的预设动画，实时观看其运行，然后复制 @keyframes 和 animation 规则。一切都在你的浏览器中运行。
常见问题
循环次数控制什么？
它设置动画播放的次数；选择 infinite 可永久循环，或填入数字让它运行相应的次数。
如何重新播放动画？
点击“重播”——它会短暂移除并重新应用动画，从而让预览从第一个关键帧重新播放。
100% 浏览器内运行
⤿
CSS 动画生成器
构建关键帧动画，实时预览并复制 CSS。
构建关键帧动画，实时预览并复制 CSS。
选择一个带有时长、缓动函数和循环次数的预设动画，实时观看其运行，然后复制 @keyframes 和 animation 规则。一切都在你的浏览器中运行。