CSS 动画生成器

CSS 关键帧动画可视化编辑，实时预览动画效果

动画属性

动画名称

时长 (秒)2s

延迟 (秒)0s

播放次数infinite

动画方向

缓动函数

关键帧

CSS 代码

@keyframes myAnimation {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

.animated {
  animation: myAnimation 2s ease infinite;
}

使用说明

设置动画属性

配置动画的基本属性：名称（@keyframes 名称）、时长（0.1-10 秒）、延迟（0-5 秒）、播放次数（1-9 次或 infinite）、方向（normal/reverse/alternate）、缓动函数（ease/linear/ease-in/ease-out/ease-in-out），也可使用 CSS Loading 工具。

编辑关键帧

关键帧编辑器预设了 0% 和 100% 两个关键帧节点。可在属性选择框中选择要设置的 CSS 属性（transform/opacity/width/height/background-color），然后调节对应值。左侧预览方块实时播放动画效果，可配合 CSS 渐变生成器工具一起使用。

实时预览与复制

修改任何参数后，左侧预览方块立即更新动画效果。底部展示完整的 @keyframes 和 animation CSS 代码，点击「复制代码」一键复制。