Animation Generator

Create CSS animations with a visual editor. Design keyframe animations with transforms, timing functions, and more.

Animation Presets

Animation Settings

Name

Duration (seconds)

Timing Function

Iteration Count

Direction

Fill Mode

Delay (seconds)

Keyframes

100%

Keyframe Settings

Offset: 0%

Translate X: 0px

Translate Y: 0px

Rotate: 0°

Scale: 1

Opacity: 1

Generated CSS

@keyframes custom-animation {
  0% {
    transform: translate(0px, 0px)
               rotate(0deg)
               scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(0px, 0px)
               rotate(0deg)
               scale(1);
    opacity: 1;
  }
}

.animated-element {
  animation: custom-animation 1s ease
             1 normal
             forwards 0s;
}