CSS 关键帧动画生成器

CSS @keyframes 规则实际上是一个小时间线：一组百分比检查点，每个检查点都声明属性在该时刻应该是什么样子，浏览器会在其间插入所有内容。手动构建一个意味着在多个属性中同时在您的脑海中保留几个百分比检查点 - 该生成器将时间线变成您可以实际看到和拖动的东西：每个属性一个水平车道，每个检查点都有一个停止标记。

核心是磨砂播放头。将其拖动到 0% 到 100% 之间的任意点，预览框会跳转到当时的精确组合状态 - 不是最近的关键帧，而是在每个活动轨道上播放头周围的任意两个停止点之间计算的真实线性插值。位置、旋转和缩放等数字属性作为普通数字进行插值；背景颜色独立地对每个红色、绿色和蓝色通道进行插值，这使得颜色轨道在中间色调之间平滑淡入淡出，而不是在您实际设置的颜色之间跳跃。

多个轨道自动组合成一个连贯的动画：每个基于变换的属性（移动、旋转、缩放）在每个关键帧百分比处合并为单个变换声明，而不透明度和背景颜色保留在自己的行上，就像真正的手写 CSS 的外观一样。给定轨道没有明确停止点的百分比只是故意从该属性的声明中排除 - 浏览器自己的关键帧插值填充了确实存在的停止点之间的间隙，就像您手动键入的任何 @keyframes 规则一样。

五种预设——弹跳、震动、脉冲、淡入和滑入——一键加载完整的、可随时调整的时间线（包括合理的持续时间、计时功能和重复计数）。随时点击“播放”即可查看在预览元素上运行的真实 CSS 动画，该动画是通过动态注入的样式表即时生成的，然后将完整的 @keyframes 块加上 .animated-element {animated-element {animation: ... } 速记直接复制到您自己的项目中。与该网站上的每个工具一样，它都在浏览器本地运行，无需上传任何内容。