CSS 关键帧动画生成器 – 实时预览
CSS 关键帧动画生成器根据所选属性和动画设置创建 @keyframes 代码块及对应的 animation 简写。从 translate、rotate、scale、opacity 或 background 中选择，然后填写起始值和结束值、时长、时间函数和循环次数。调整设置时可实时预览动画，并复制生成的值。
CSS 关键帧动画生成器根据您选择的设置创建 @keyframes 代码块和 animation 简写。选择 translate、rotate、scale、opacity 或 background 作为动画属性，输入起始值和结束值，并设置时长、时间函数和循环次数。实时预览让您可以在操作时查看生成的动画效果。
生成器使用这些设置编写关键帧定义和对应的 animation 简写。所选属性决定了起始值与结束值之间变化的内容；时长、时间函数和循环次数决定了动画的运行方式。您可以复制 CSS 所需的生成值。
CSS 关键帧描述动画状态之间的变化，而 animation 简写将动画设置汇总到一条声明中。在制作动效原型、准备测试数据或向样式表添加动画时，同时生成两者会很有帮助。预览提供了一种在复制代码前快速检查效果的方式。
该工具完全在您的浏览器中运行。输入在您的设备上处理，不会发送到服务器。页面加载后支持离线使用，您可以无需网络继续使用；工具免费。
这款生成器适合任何想创建或预览 CSS 动画值的开发者，无论经验水平如何。也适合准备包含关键帧动画代码的夹具或种子数据的 DevOps 工程师和团队。
步骤 1：选择动画属性：translate、rotate、scale、opacity 或 background。这决定了生成的关键帧描述的是哪种变化。
步骤 2：为所选属性设置起始值和结束值。这些值定义了动画的起始状态和结束状态。
步骤 3：选择时长、时间函数和循环次数。生成的 animation 简写会反映这些设置。
步骤 4：生成 CSS 并检查实时预览，查看效果。
步骤 5：复制 @keyframes 代码块、animation 简写，或您需要的其他生成值。
使用场景：为测试、夹具或种子数据创建可直接使用的关键帧动画值，然后将生成的 CSS 复制到项目中。
使用场景：一次批量生成多个动画值，而无需手动编造。
使用场景：获得合理随机的值，而不是依赖随意敲出的猜测。
使用场景：在选择属性和起止值时预览 CSS 动画，帮助您在复制代码前检查效果。
使用场景：为界面原型构建 @keyframes 代码块和 animation 简写，而无需从零编写这两部分。
使用场景：将关键帧和简写一起生成，为样式表准备动画代码。