CSS Animation & Keyframe Generator

Free online CSS animation generator. Convert transitions to @keyframes instantly.

Back to Animation Generator
Advertisement

CSS Animation Loop

Control animation loops with iteration-count and direction. Create infinite loading spinners, pulsing effects, and repeating animations.

animation-iteration-count

1

Default. Plays once and stops.

3

Plays exactly 3 times then stops.

infinite

Loops forever. Use for spinners.

animation-direction

normal

Plays forward: 0% → 100%

reverse

Plays backward: 100% → 0%

alternate

Forward then backward. Smooth ping-pong effect.

alternate-reverse

Backward then forward.

Infinite Loading Spinner

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

Generate Looping Animations

Create custom keyframes for infinite or finite loop animations.

Create Loop Animation
Advertisement