CSS Animation Generator

Build @keyframes animations visually. Set timing, duration, and keyframe properties with a live preview.

Last reviewed: June 2026

Reviewed by Shannon Patterson, software engineer · last updated June 2026

New to this tool? Click here for instructions

Duration 1s

Delay 0s

Timing Function

Iterations

Direction

Fill Mode

Keyframes

Generated CSS

Configure keyframes and timing to generate your animation CSS.

How the CSS Animation Generator works

This tool builds the @keyframes rule and the matching animation shorthand directly in your browser. The sliders, keyframe rows, timing menu, iteration setting, direction, and fill-mode controls update the preview element and CSS output without sending the keyframe data to a backend service.

Use it for small production-ready motion patterns such as button feedback, loading indicators, notification entrances, hover treatments, and documentation examples. Start with a preset when you need a quick fade, slide, pulse, spin, or bounce, then tune the percentages and properties until the preview matches the interaction you want.

Workflow notes

Prefer compositor-friendly properties: transforms and opacity are usually safer than animating width, height, left, top, or expensive filters.
Keep timing intentional: short UI feedback commonly feels best in the 120-300 ms range, while decorative looping motion should be slower and subtle.
Plan for reduced motion: wrap nonessential animation in a @media (prefers-reduced-motion: reduce) fallback or disable looping motion for users who request it.
Copy both parts: the generated CSS includes the @keyframes block and the selector rule that applies it.

Worked example

For a card entrance, set duration to 320ms, timing to ease-out, fill mode to both, and keyframes from opacity: 0; transform: translateY(8px) at 0% to opacity: 1; transform: translateY(0) at 100%. The preview shows whether the movement feels too abrupt before you paste it into the component CSS.

Sources

Frequently Asked Questions

CSS keyframe animations let you animate an element over time by defining multiple visual states and the timing between them.

CSS transitions animate between two states on user interaction, while CSS animations play automatically and can loop indefinitely.

Animation timing functions control the speed curve of the animation, such as ease, linear, ease-in, ease-out, and ease-in-out.

animation-fill-mode determines the styles applied to an element before and after the animation plays, such as none, forwards, backwards, or both.

To make an animation loop forever, set the animation-iteration-count property to infinite.

Implementation checklist

Animation output checks before shipping
Check	Why it matters	Good default
Property choice	Layout-triggering properties can cause jank.	Use `transform` and `opacity` when possible.
Duration	Motion that is too slow blocks interaction.	120-300 ms for UI feedback; longer for decorative loops.
Fill mode	Controls pre/post-animation styles.	`both` for entrance animations.
Reduced motion	Some users request less animation.	Add a `prefers-reduced-motion` fallback.