CSS动画生成器

可视化配置CSS关键帧动画

Name

Easing

Duration (s)

Delay (s)

Iterations

Direction

Keyframes

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.box {
  animation: my-animation 1s ease 0s 1 normal;
}