已复制

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）。
编辑关键帧
关键帧编辑器预设了 0% 和 100% 两个关键帧节点。可在属性选择框中选择要设置的 CSS 属性（transform/opacity/width/height/background-color），然后调节对应值。左侧预览方块实时播放动画效果。
实时预览与复制
修改任何参数后，左侧预览方块立即更新动画效果。底部展示完整的 @keyframes 和 animation CSS 代码，点击「复制代码」一键复制。