animation in css Keyframes

Keyframes Visualizer

PROGRESS 0%

OPACITY 1.00

SCALE 1.00

➜

0%

@keyframes customAnimation {

  0% {
      transform: translateX(-40px);
      opacity: 0;
  }

  100% {
      transform: translateX(40px);
      opacity: 1;
  }

}

Preset From / To 0% 50% 100% Multi-step Rotate Bounce Fade In Out

Duration (s)

Play Animation