CSS Animation Maker

Create CSS keyframe animations

100% private — everything stays in your browser

Animation name

Preset

Duration (s)

Iteration count

Timing function

@keyframes my-animation {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.element {
  animation: my-animation 1s ease infinite;
}

How to use CSS Animation Maker

1
Provide your input — Enter your data or adjust the settings in the CSS Animation Maker tool above.
2
Get your result — Results appear instantly — all processing happens in your browser.
3
Copy or download — Copy or download your result. Everything was processed locally on your device.

Related tools

🔲

Box Shadow Generator

Generate CSS box shadows

📐

Flexbox Playground

Learn and generate flexbox CSS

🔳

CSS Grid Generator

Generate CSS Grid layouts

⬜

Border Radius Generator

Generate CSS border radius