CSS Animation Generator

Keyframe animations with live preview

Duration1s

Easing

Repeat

⚡

CSS

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

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

Loading tool…

About the CSS Animation Generator

Generate CSS keyframe animations with live preview: ten ready-made effects (bounce, pulse, shake, spin, fade, slide, zoom, flip, wobble) with adjustable duration, easing (including a springy cubic-bezier), and repeat count. Copy the complete @keyframes block plus the animation shorthand.

How to use

1Pick an animation preset.
2Tune duration, easing, and repeats while watching the preview.
3Copy the @keyframes CSS.

Related Colors & Design tools

Color Picker & Converter Gradient Generator Box Shadow Generator Flexbox Builder Grid Builder Border Radius Generator

CSS Animation Generator is part of DevKit — 100 free, privacy-first tools for developers, students, and everyone, built by Minhazul Ashim. Everything runs in your browser; your data never leaves your machine.