CSS关键帧动画生成器

什么是CSS关键帧动画生成器？

如何使用CSS关键帧动画生成器

1. 1

   选择预设：点击左侧预设动画列表，从现有12种常用动画预设里选择一个基础效果，如果没有合适的，也可以选择从头新建自定义动画。

2. 2

   编辑参数：点击添加关键帧按钮后，拖动界面上对应参数的滑块，调整每个关键帧的动画时长、位移、旋转、透明度、缩放等属性参数。

3. 3

   预览效果：点击『预览』按钮，即可在预览区域实时查看动画运行效果，根据预览效果反复调整参数，直到满意为止。

4. 4

   复制代码：调整完成后，点击『复制代码』按钮，就可以直接复制生成好的完整CSS代码，粘贴到你的项目中使用。

什么场景会用到？

计算示例

注意事项

• 生成的代码仅包含@keyframes规则和基础动画类，若需绑定到指定元素，需要手动将动画类添加到目标元素的class属性中。
• 缓动函数的可选效果由浏览器原生支持，不同浏览器对部分高级贝塞尔曲线的渲染效果可能存在细微差异。
• 如果添加了超过10个自定义关键帧，部分旧版本浏览器可能无法完整识别所有关键帧样式。
• 工具生成的前缀仅包含-webkit-，适配绝大多数现代浏览器，若需要兼容旧IE浏览器需手动补充前缀。

常见问题

参考资料

• W3C CSS Animations Level 1 规范
• MDN Web Docs @keyframes 文档

本页生成规则遵循W3C CSS动画官方规范，所有生成代码可直接在现代浏览器中使用，由工具集编辑组维护，预置的动画预设均经过实际效果测试。