CSS Animation Generator

Create beautiful animations with visual preview. 12+ presets, custom keyframes, copy code instantly.

⌘+C Copy CSS⌘+T Tailwind⌘+S Save⌘+P Play/Pause
Preview
1x
CSS Code
@keyframes myAnimation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

.myAnimation {
  animation: myAnimation 1s ease 0s infinite normal none;
}
0%
50%
100%

Animation Presets (12)

Frequently Asked Questions

Common questions about CSS Animations

01

What are CSS animations?

02

What is @keyframes?

03

How do I use the generated animation?

04

Can I combine multiple animations?

05

What's the best timing function for animations?

06

How do I make animations responsive?