CSS动画生成器

工具介绍

CSS动画生成器可以帮你快速可视化创建CSS transform动画，支持设置位移、旋转、缩放、透明度多个属性，支持自定义关键帧和缓动函数，实时预览动画效果，直接生成可使用的CSS代码。

使用方法

• 设置动画名称、动画时长（单位：秒）、循环次数
• 选择内置缓动函数，或自定义cubic-bezier贝塞尔曲线参数
• 在表格中设置每个关键帧的属性值，不需要的属性留空即可
• 点击「+ 添加」可以增加更多关键帧（最多5个）
• 上方预览区会实时展示动画效果，下方生成区直接输出完整CSS代码

CSS动画基本原理

CSS @keyframes动画通过定义不同进度（百分比）的元素样式，浏览器会自动在关键帧之间平滑过渡生成动画。核心语法结构：

@keyframes 动画名称 {
  0% {  /* 动画开始状态 */
    transform: ...;
    opacity: ...;
  }
  50% { /* 动画中间状态 */
    transform: ...;
    opacity: ...;
  }
  100% { /* 动画结束状态 */
    transform: ...;
    opacity: ...;
  }
}

/* 使用动画 */
.target {
  animation: 动画名称 时长 缓动函数 循环次数;
}

transform常用属性说明：

属性	说明	单位
translateX/translateY	水平/垂直位移	px
rotate	旋转角度	deg
scale	缩放比例，1代表原大小	无单位

注意事项

• 不需要设置的属性请留空，代码生成时会自动跳过
• 自定义cubic-bezier参数请保持 0 ≤ x1, x2 ≤ 1，否则不符合CSS规范
• opacity取值范围是0（完全透明）到1（完全不透明）
• 生成的代码可以直接复制到你的CSS文件中使用