Custom Keyframe Animation

Visually design and export CSS background color animations.

Keyframes

50%

100%

Timing & Loop

Duration (s)

Delay (s)

Iterations (e.g., 'infinite' or 3)

Style

Direction

Easing

.animated-element {
  animation: color-animation-Rjtt7qja 5s ease-in-out 0s infinite alternate;
}

@keyframes color-animation-Rjtt7qja {
  0% { background-color: #ef4444; }
  50% { background-color: #3b82f6; }
  100% { background-color: #10b981; }
}