CSS Animation Keyframes

Generate keyframes and utility classes for common UI animations.

Back to Design & UI

CSS Animation Generator

Generate keyframes and utility classes for common UI animations

Select Motion

Duration: 1s

Easing

Iteration

Implementation Code

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

.animated-element {
  animation: bounce 1s ease-in-out infinite normal;
}

Live Preview

About CSS Animation Keyframes

Bring your UI to life. Generate ready-to-use CSS keyframes for animations like bounce, shake, fade, and spin with customizable timing and duration.

Something not working right?

Found a bug or have a suggestion to improve the CSS Animation Keyframes? Let us know and we'll fix it!