transition vs animation - what is the difference?

**Transition** = reactive, "A to B" when a value changes (e.g. hover). **Animation + @keyframes** = independent, has its own start, end, can loop. Animation is more flexible (multiple keyframes, repeat, alternate). Transition is simpler.

What happens **before and after the animation**. `none` = element keeps its original styles (animation "disappears"). `forwards` = element keeps the last keyframe styles after the animation. `backwards` = element already has the first keyframe styles before the animation (during delay). `both` = both sides. **Most UIs want `both`**.

Direction: normal vs alternate?

**Normal** = 0% to 100%, then jumps back to 0%. **Reverse** = 100% to 0%. **Alternate** = 0% to 100% to 0% to 100% (back and forth). Great for **pulse** (grow, shrink, grow). **Alternate-reverse** = first cycle goes reversed.

How do I play it once, on load?

Default is **1 iteration** + `forwards` fill-mode. The animation plays once on load and the element stays in the final state. You can also toggle `animation-play-state` (play/paused) from JS.

Are CSS animations fast?

**Only animate transform and opacity**. GPU-accelerated, 60fps on every device. `background`, `color` are slightly slower but fine for short animations. **Never animate** `width`, `height`, `top`, `left` - layout thrashing, 30fps or worse.

Why is my animation not starting?

**Check**: 1) Is the `.target` class on the element? 2) Does the keyframes name match the name in `animation:`? 3) No typo in `@keyframes`? 4) Element is not `display: none` (no animation on hidden elements). 5) DevTools Animations tab shows the active animation list.

Can I trigger an animation on click?

Yes, two ways: 1) **CSS**: add a class with the animation on click (JS event listener: `el.classList.add('anim')`). 2) **JS animation API**: `el.animate(...)` programmatically with no @keyframes. The first is easier, the second gives full control.

Do animations affect accessibility?

**Yes**. Some users have **prefers-reduced-motion** in their OS (Windows, macOS, Linux) and expect minimal motion. Good practice: `@media (prefers-reduced-motion: reduce)` and disable or shorten animations. **Strong, long animations** can cause motion sickness for some people.

CSS animation or Framer Motion?

**CSS** for simple micro-interactions (hover, fade-in, spinner). Lightweight, **0 bundle size**, GPU-fast. **Framer Motion** for complex orchestration (multiple elements animating together, spring physics, gesture-driven). Larger bundle (~50kb) but a much more flexible API.

CSS Animation Builder - free

@keyframes my-anim { 0% { background: #3b82f6; } 25% { transform: translate(0px, -40px); background: #3b82f6; } 50% { background: #3b82f6; } 75% { transform: translate(0px, -20px); background: #3b82f6; } 100% { background: #3b82f6; } } .target { animation: my-anim 1000ms ease-in-out infinite normal both; }

How do I build a CSS animation without memorizing @keyframes?

@keyframes is the declarative way to animate in CSS. You define a handful of keyframes (0%, 50%, 100% or more), give each one a set of CSS values (transform, opacity, color), and the browser interpolates smoothly between them. The result is buttery 60fps motion with no JavaScript.

Here you get a visual editor. Click a preset (fade-in, slide, bounce, shake, pulse, spin) or add your own keyframes. Each frame has its own X/Y translate, scale, rotation, opacity and color. Below is a live preview that updates as you change parameters.

The side panel sets globals: duration, easing, iteration count, direction (normal / alternate), fill-mode. Hit "Copy" and you get the full CSS: an `@keyframes` block plus a class with `animation: ...`.

How to use

Click a preset (fade-in, slide, bounce, pulse, spin) from the gallery below. Each gives you 2-5 ready keyframes.
On the right you see the keyframe list (0% / 50% / 100%, etc.). Click a frame to edit its properties.
Sliders: translate X/Y, scale (1 = original, 0.5 = small, 2 = big), rotate in degrees, opacity 0-1, background color.
Duration (100-5000ms), easing (linear, ease, cubic-bezier), iterations (1, infinite), direction (alternate = back and forth).
Copy the CSS, paste it into a stylesheet and add the `.target` class to your element. The animation starts automatically.

When this helps

Micro-interactions are what separates premium UI from cheap. A 200-400ms animation on hover, click or reveal makes a site feel alive:

Fade-in on scroll. Element appears when it enters the viewport, plus a small upward translate = content that "slides in".
Pulse on a CTA button. A softly pulsing call-to-action draws the eye without being annoying (`pulse` infinite, alternate).
Shake on form validation error. Password field shakes 300ms when wrong = clear visual feedback.
Bounce on toast notifications. A small hop as the toast slides in.
Spin loader. The classic spinner while you wait for a server response (`spin` infinite linear).
Slide-in mobile menu. Hamburger menu slides in from the right.
Hero color shift. Background gradient cycles through colors, gives the premium fintech feel.

For custom easing curves see the cubic-bezier generator. For other visual effects see box-shadow and clip-path.

Frequently asked

A keyframe is a checkpoint in the animation. You say "at 0% opacity is 0, at 100% opacity is 1". The browser interpolates values in between. You can add as many keyframes as you want (0%, 25%, 50%, 100%) for finer control of the motion.

How do I build a CSS animation without memorizing @keyframes?

How to use

Click a preset (fade-in, slide, bounce, pulse, spin) from the gallery below. Each gives you 2-5 ready keyframes.

On the right you see the keyframe list (0% / 50% / 100%, etc.). Click a frame to edit its properties.

Sliders: translate X/Y, scale (1 = original, 0.5 = small, 2 = big), rotate in degrees, opacity 0-1, background color.

Duration (100-5000ms), easing (linear, ease, cubic-bezier), iterations (1, infinite), direction (alternate = back and forth).

Copy the CSS, paste it into a stylesheet and add the `.target` class to your element. The animation starts automatically.

When this helps

Micro-interactions are what separates premium UI from cheap. A 200-400ms animation on hover, click or reveal makes a site feel alive:

Fade-in on scroll. Element appears when it enters the viewport, plus a small upward translate = content that "slides in".
Pulse on a CTA button. A softly pulsing call-to-action draws the eye without being annoying (`pulse` infinite, alternate).
Shake on form validation error. Password field shakes 300ms when wrong = clear visual feedback.
Bounce on toast notifications. A small hop as the toast slides in.
Spin loader. The classic spinner while you wait for a server response (`spin` infinite linear).
Slide-in mobile menu. Hamburger menu slides in from the right.
Hero color shift. Background gradient cycles through colors, gives the premium fintech feel.

For custom easing curves see the cubic-bezier generator. For other visual effects see box-shadow and clip-path.

Frequently asked

CSS Animation Builder