Animations & Transitions Generator

Create smooth and reusable CSS animations and transitions

Animation Type

Keyframes Animation

Complex multi-step animations

CSS Transition

Simple state changes

Animation Preset

Animation Name

Iteration Count

Timing

Duration (seconds): 1s

Delay (seconds): 0s

Easing Function

Preview

Generated CSS

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

.animated {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* Shorthand */
.animated {
  animation: fadeIn 1s ease-in-out 0s 1 both;
}