CSS动画生成器

@keyframes 可视化编辑 / 实时预览 / 预设模板

动画名称

duration: 1s

timing-function

iteration-count

direction

fill-mode

delay: 0s

关键帧

生成的CSS代码

@keyframes myAnimation {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(100px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

CSS动画说明

CSS动画通过@keyframes定义关键帧，配合animation属性控制播放。支持设置时长、缓动函数、循环次数、方向和填充模式。本工具提供可视化编辑和预设模板，快速生成动画代码。如需静态变换效果可使用Transform预览工具。