不喜欢广告？ 去 无广告 今天
CSS关键帧动画生成器
颜色开发人员
广告 移除？
广告 移除？
指导
CSS关键帧动画生成器
通过实时预览，可视化创建CSS @keyframes动画。可选择10个流行预设，如弹跳、摇晃、脉动、淡入、滑入、旋转、摆动、弹性带、闪烁和晃动——或从零开始构建自定义关键帧动画。调整持续时间、缓动函数、迭代次数、方向和填充模式，然后复制生成的CSS代码。
如何使用
选择预设动画或从自定义动画开始。配置动画设置——名称、持续时间、缓动函数、迭代次数、方向和填充模式。通过设置百分比、CSS变换值和不透明度来编辑关键帧停止点。根据需要添加或删除关键帧停止点。实时查看预览更新，然后复制生成的CSS代码。
特征
- 10个动画预设 – 弹跳、摇晃、脉动、淡入、滑入、旋转、摆动、弹性带、闪烁和晃动，即用即得
- 自定义关键帧编辑器 – 可通过百分比、变换和不透明度控件添加、删除和编辑关键帧停止点
- 实时动画预览 – 在实时更改时，可在演示元素上看到动画的播放效果
- 完整动画控制 – 可配置持续时间、缓动函数（包括自定义cubic-bezier）、迭代次数、方向和填充模式
- 简洁的CSS输出 – 生成@keyframes规则和动画简写属性，可直接粘贴到您的样式表中
广告 移除？
常问问题
-
什么是CSS @keyframes？
CSS @keyframes定义动画序列的各个阶段。每个关键帧指定在动画时间轴上的特定点的样式，以从0%（开始）到100%（结束）的百分比表示。浏览器在关键帧之间插值属性值，以创建平滑的过渡。
-
CSS过渡与CSS动画有何区别？
CSS过渡在两个状态之间动画一个属性的变化（例如悬停时），由状态变化触发。CSS动画使用@keyframes可以自动运行、循环、具有多个中间步骤，并提供更灵活的控制，如animation-direction、iteration-count和fill-mode属性。
-
动画填充模式属性的作用是什么？
动画填充模式属性控制动画播放前后的样式应用方式。“向前”在动画结束后保持最终关键帧的样式。“向后”在延迟期间应用第一个关键帧的样式。“两者”同时应用这两种行为。“无”则恢复元素的原始样式。
-
什么是cubic-bezier缓动函数？
cubic-bezier缓动函数通过四个控制点（x1, y1, x2, y2）定义动画的自定义速度曲线。它决定了动画在不同时间点的快慢程度。常见的预设如ease、ease-in和ease-out是特定cubic-bezier值的快捷名称。
