🎬 CSS 关键帧生成器
几秒钟内设计CSS关键帧动画 — 在每个关键帧设置变换和透明度，预览实时动画，并复制可直接粘贴的@keyframes代码。无需安装，无需注册，完全在您的浏览器中运行。
隐私优先设计. 此工具完全在您的浏览器中运行 — 您输入的任何内容都不会上传或存储，并且可以离线使用。
关于
CSS 关键帧生成器让你无需手动编写一行代码即可创建 @keyframes 动画。你可以定义三个关键点（0%、50% 和 100%）的转换属性——平移（X 和 Y）、缩放和旋转，以及透明度。动画持续时间、时间函数（ease、linear、ease-in、ease-out、ease-in-out 或自定义 cubic-bezier）以及重复次数（有限或无限）都可以在面板中进行配置。实时动画预览会立即更新，以便你调整数值，直到动画效果感觉合适。准备就绪后，点击复制，完整的 @keyframes 代码块（包括动画简写）将被复制到剪贴板，随时可以粘贴到你的样式表中。所有操作都在浏览器中完成，无需上传文件，也不会发送任何数据。
如何使用
- 设置转换值——平移X/Y、缩放和旋转，以及0%停止点的透明度（动画的开始部分）
- 调整50%停止点的值以定义运动的中点，或保留默认值以创建一个简单的两状态过渡。
- 设置100%停止点的值以定义结束状态，然后配置持续时间（以秒为单位）、时间函数和重复次数。
- 实时观看预览更新，并微调任何值，直到动画看起来完全正确。
- 点击“复制CSS”将完整的@keyframes块和动画属性复制到剪贴板，然后直接粘贴到您的样式表中。
常见问题
- 我可以动画哪些转换属性？
- 您可以动画平移X、平移Y、缩放和旋转，以及透明度。每个属性在0%、50%和100%的关键帧停止点上独立设置。
- 有哪些时间函数可用？
- 构建器包括ease、linear、ease-in、ease-out和ease-in-out预设，以及一个自定义cubic-bezier选项，让您创建独特的加速曲线。
- 我可以让动画无限循环吗？
- 是的。将重复次数设置为无限，生成的CSS将使用animation-iteration-count: infinite，使动画连续循环。
- 我需要了解CSS才能使用这个工具吗？
- 不需要。构建器是完全可视化的——只需移动滑块并从下拉菜单中选择值。CSS将为您自动生成，并随时复制到任何项目中。
- 生成的CSS是否兼容所有现代浏览器？
- 是的。输出使用标准的@keyframes和动画简写属性，这些在所有现代浏览器中都得到支持，包括Chrome、Firefox、Safari和Edge，无需任何供应商前缀。
- 此工具会上传我的数据吗？
- 不会。所有操作都在您的浏览器中完成，因此您的数据永远不会离开您的设备 — 甚至在页面加载后也可以离线使用。