CSS Animation Generator

The CSS Animation Generator lets you build keyframe animations and transitions visually — no typing @keyframes blocks from scratch. Pick from common animation patterns (fade, slide, scale, rotate, bounce, shake, pulse, spin, zoom) or build custom keyframes by adding stops at specific percentages (0%, 50%, 100%) and specifying properties at each stop. Configure timing with a visual cubic-bezier editor — drag control points to fine-tune easing curves beyond the default ease-in, ease-out, ease-in-out. See the animation running live in a preview box, tweak until it feels right, then copy the complete CSS ready to drop into your stylesheet.

Animations and transitions are the difference between a flat website and one that feels alive. Done well, they guide attention, communicate state changes, and delight users. Done poorly, they annoy and distract. Getting animations right requires tuning — duration (too fast feels jarring, too slow feels sluggish), easing (linear feels mechanical, ease-in-out feels natural), timing, and property selection (animate transform and opacity for GPU acceleration; avoid animating layout properties like width or margin). This generator handles all of that — including GPU-friendly property recommendations so your animations stay smooth at 60fps.

CSS animations (CSS3, widely supported since 2012) work via two mechanisms: transitions (simple state changes) and keyframe animations (complex multi-step animations).

CSS Transitions:

For property changes on state (hover, focus, class toggle):

``css
.button {
background: blue;
transition: background 300ms ease-in-out, transform 200ms ease-out;
}
.button:hover {
background: darkblue;
transform: scale(1.05);
}
``

Properties: transition-property, transition-duration, transition-timing-function, transition-delay. Or shorthand transition.

CSS Keyframe Animations:

For complex multi-step sequences:

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

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

Properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count (number or infinite), animation-direction (normal, reverse, alternate), animation-fill-mode (none, forwards, backwards, both), animation-play-state.

Easing (timing functions):

- linear — constant speed (often feels mechanical).
- ease — default; ease-in, then ease-out.
- ease-in — slow start, fast end (accelerate).
- ease-out — fast start, slow end (decelerate) — feels most natural for UI.
- ease-in-out — slow start and end.
- cubic-bezier(x1, y1, x2, y2) — custom curve.
- steps(n) — discrete steps (useful for sprite animation).

Common cubic-bezier values:

- cubic-bezier(0.4, 0, 0.2, 1) — Material Design standard.
- cubic-bezier(0.68, -0.55, 0.265, 1.55) — with overshoot (bounce-in).
- cubic-bezier(0.175, 0.885, 0.32, 1.275) — ease-out-back.

GPU-friendly properties:

These properties can be animated smoothly at 60fps because they do not trigger layout or paint:

- transform (translate, scale, rotate, skew)
- opacity
- filter (blur, brightness, etc.)

Expensive properties (avoid animating):

These trigger layout or paint on every frame, causing jank:

- width, height, top, left, right, bottom, margin, padding — layout
- background-color, color — paint (OK for single transitions, avoid for continuous)

Prefer:

```css
/* BAD — animates layout */
.panel { transition: width 300ms; }
.panel.expanded { width: 300px; }

/* GOOD — animates transform */
.panel { transition: transform 300ms; transform: translateX(-300px); }
.panel.expanded { transform: translateX(0); }
```

prefers-reduced-motion:

Accessibility: some users opt into reduced motion. Respect it:

``css
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
``

Performance tips:

- Use will-change: transform, opacity to hint the browser to use GPU compositing.
- Keep animations short (100-500ms for UI feedback, 1-2s for attention-getters).
- Avoid animating many elements simultaneously.
- Use requestAnimationFrame for JavaScript-driven animations.

CSS transitions vs CSS animations: Transitions are for simple state changes (hover, focus) — from one value to another. Animations can have multiple keyframe stops, loop, and run without triggering events. Transitions are simpler; animations are more powerful.

CSS animations vs JavaScript animations: CSS is declarative, GPU-accelerated, and synchronized with browser compositor. JS animations (requestAnimationFrame, GSAP, Motion One) give fine-grained control, timeline orchestration, and physics. Start with CSS; switch to JS when you need complex sequencing.

CSS animations vs Web Animations API: Web Animations API gives CSS keyframes programmatic control via JavaScript. Element.animate() lets you control play/pause, reverse, speed. More powerful than CSS alone but requires JS.

CSS animations vs transform transitions: Transitions on transform/opacity are the 90% case — faster to write, less code, GPU-accelerated. Reserve keyframe animations for actual multi-step sequences or loops.

GSAP vs CSS animations: GSAP (GreenSock) is the industry-standard JS animation library. Far more powerful — timelines, stagger, morph, scroll-based, SVG path animations. But requires adding a library (150KB minified). Use CSS for simple, GSAP for complex.

Animate.css vs custom: Animate.css is a library of pre-made animations. Drop it in, add a class. Good for rapid prototyping or simple needs. Custom animations fit your brand better. This generator bridges — gives you custom CSS from visual editing.