CSS Animation Generator

Visually design CSS animations with delay, duration, easing, and direction controls, and copy the generated CSS & keyframes.

Animation Preset

Duration: 1s

Delay: 0s

Iterations

Direction

Easing

Fill Mode

Play State

Animation Preview

.element {
  animation: fadeIn 1s ease-in-out 0s infinite normal both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}