Does this run entirely in my browser?

Yes. The editor, the live preview, and the CSS output are all plain JavaScript and native CSS animations running in your tab. Nothing is uploaded, nothing is logged. You can disconnect from the network and it keeps working.

Why does my real element look different from the preview here?

99% of the time it is a missing or conflicting property. CSS only animates properties that have a defined start and end value, and a transform on the target can be overridden by another rule with higher specificity. Copy the exact .element block this tool generates, paste it into an isolated element, and confirm there is no other animation or transform fighting it.

What is the difference between fill-mode forwards and the default?

By default an element snaps back to its pre-animation styles once the animation ends. fill-mode forwards keeps the 100% keyframe's computed values applied after it finishes, backwards applies the 0% values during the delay, and both does both. Use forwards when an entrance animation should leave the element in its final position rather than blink back.

Can I animate properties other than transform and opacity?

This tool ships transform, opacity, and background-color because those are the three that cover most UI motion and stay cheap to animate. transform and opacity are GPU-compositable, so they animate without triggering layout or paint — that is why we lead with them. background-color is included for color transitions; avoid animating layout properties like width/height/top/left in production because they thrash the main thread.

How do I make the animation loop forever?

Set iteration-count to infinite. Pair it with direction alternate if you want a back-and-forth ping-pong instead of a hard jump from 100% back to 0% on each loop.

Build a reusable entrance animation for a design system

You need a single "fade-up" entrance that every card in your design system reuses. Add three keyframe stops: at 0% set opacity 0 and translateY 16px, at 100% set opacity 1 and translateY 0. Set duration 400ms, timing-function the ease-out preset, and fill-mode forwards so the card stays put after it lands. Copy the @keyframes block, name it `fade-up`, and drop it in your global stylesheet — now every `.card` just needs `animation: fade-up 400ms ease-out both`. The live preview confirms the easing feels right before you commit the value into a token.

Prototype a loading spinner without reaching for a GIF

A spinner is just a rotate from 0deg to 360deg on infinite loop. Add a 0% stop with rotate 0deg and a 100% stop with rotate 360deg, set iteration-count infinite, timing-function linear, and duration 800ms. The preview spins immediately so you can dial the speed by eye. Copy the output and you have a CSS-only spinner that is sharper than any GIF and recolors with a single CSS variable — no asset pipeline, no extra request.

Tune a "pulse" attention animation for a CTA

Marketing wants the primary button to gently pulse. Add 0% scale 1, 50% scale 1.06, 100% scale 1, set direction normal, iteration-count infinite, and a soft ease-in-out. Scrub the timeline to the 50% mark and check the peak scale is noticeable but not jarring. Because the preview uses the same GPU-compositable transform the browser will, what you see is frame-for-frame what users get on a real CTA.

Hand a developer a copy-paste animation from a Figma spec

A designer described a motion as "slide in from the left, overshoot slightly, settle." Translate it into keyframes: 0% translateX -100%, 70% translateX 4%, 100% translateX 0, duration 500ms, timing-function the back-ish cubic-bezier preset. Confirm the overshoot reads correctly in the preview, then paste the generated CSS straight into the PR. No back-and-forth about "how much overshoot" — the numbers are in the keyframes.

Debug why an animation jumps instead of easing

An existing animation snaps at the end of every loop. Rebuild it here keyframe by keyframe and toggle direction to alternate — the jump disappears because the element now plays forward then backward instead of teleporting from 100% to 0%. Compare the generated shorthand against the one in your codebase; the missing piece is almost always `direction: alternate` or a `timing-function` mismatch on the reverse leg. Now you have the corrected, working CSS to paste back.

CSS Keyframes Animation Generator

Visually build @keyframes — edit keyframes, set transform/opacity/color, live-preview, and copy production-ready CSS — browser-only

Runs locally
Category Color & Design
Best for Moving from a visual idea to reusable color values.

Keyframes

Editing keyframe · 0%

Offset: 0%

Transform

Translate X

Translate Y

Scale

Rotate

Skew X

Skew Y

Opacity: 1

Background

Animation

Name

Duration (ms)

Timing

Delay (ms)

Iterations

infinite

Direction

Fill mode

Live preview

Edit a keyframe, watch it run, copy the CSS. Prefer transform + opacity for jank-free motion.

CSS output

@keyframes my-animation {
  0% {
    transform: none;
  }
  50% {
    transform: translate(0px, -40px) scale(1.2);
  }
  100% {
    transform: none;
  }
}

.element {
  animation: my-animation 1.5s ease-in-out infinite alternate none;
}

What this tool does

A visual editor for CSS @keyframes animations. Add keyframe stops from 0% to 100%, and on each stop set transform (translate, scale, rotate, skew), opacity, and background-color. The animation runs on a real element next to the editor so you see exactly what ships — pause, replay, or scrub the timeline live. Tune the full animation shorthand: duration, timing-function (ease / linear / steps and a set of cubic-bezier presets), delay, iteration-count (including infinite), direction (normal / reverse / alternate), and fill-mode (none / forwards / backwards / both). The output panel emits a complete, copy-paste-ready block: the @keyframes rule plus the .element { animation: ... } shorthand, with vendor-prefix-free modern syntax. Every setting is encoded in the URL, so a "share" link reopens the exact animation you built — and your last session is remembered in localStorage. 100% client-side: no upload, no build step, no account.

Tool details

Input: Numbers + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 14 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Color & Design · Designer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CSS Keyframes Animation Generator fits into your work

Use it while choosing, checking, converting, or documenting colors for real interface work.

Color jobs

Moving from a visual idea to reusable color values.
Checking contrast and accessibility before a UI ships.
Keeping brand, design, and implementation color decisions aligned.

Color checks

Verify contrast against the actual background, not just a sample swatch.
Check dark and light themes separately when both exist.
Copy the final format your design system or codebase expects.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Build a reusable entrance animation for a design system
You need a single "fade-up" entrance that every card in your design system reuses. Add three keyframe stops: at 0% set opacity 0 and translateY 16px, at 100% set opacity 1 and translateY 0. Set duration 400ms, timing-function the ease-out preset, and fill-mode forwards so the card stays put after it lands. Copy the @keyframes block, name it `fade-up`, and drop it in your global stylesheet — now every `.card` just needs `animation: fade-up 400ms ease-out both`. The live preview confirms the easing feels right before you commit the value into a token.
Prototype a loading spinner without reaching for a GIF
A spinner is just a rotate from 0deg to 360deg on infinite loop. Add a 0% stop with rotate 0deg and a 100% stop with rotate 360deg, set iteration-count infinite, timing-function linear, and duration 800ms. The preview spins immediately so you can dial the speed by eye. Copy the output and you have a CSS-only spinner that is sharper than any GIF and recolors with a single CSS variable — no asset pipeline, no extra request.
Tune a "pulse" attention animation for a CTA
Marketing wants the primary button to gently pulse. Add 0% scale 1, 50% scale 1.06, 100% scale 1, set direction normal, iteration-count infinite, and a soft ease-in-out. Scrub the timeline to the 50% mark and check the peak scale is noticeable but not jarring. Because the preview uses the same GPU-compositable transform the browser will, what you see is frame-for-frame what users get on a real CTA.
Hand a developer a copy-paste animation from a Figma spec
A designer described a motion as "slide in from the left, overshoot slightly, settle." Translate it into keyframes: 0% translateX -100%, 70% translateX 4%, 100% translateX 0, duration 500ms, timing-function the back-ish cubic-bezier preset. Confirm the overshoot reads correctly in the preview, then paste the generated CSS straight into the PR. No back-and-forth about "how much overshoot" — the numbers are in the keyframes.
Debug why an animation jumps instead of easing
An existing animation snaps at the end of every loop. Rebuild it here keyframe by keyframe and toggle direction to alternate — the jump disappears because the element now plays forward then backward instead of teleporting from 100% to 0%. Compare the generated shorthand against the one in your codebase; the missing piece is almost always `direction: alternate` or a `timing-function` mismatch on the reverse leg. Now you have the corrected, working CSS to paste back.

Common pitfalls

Animating width, height, top, or left forces the browser to recompute layout on every frame and will jank on mobile. Prefer transform (translate/scale) and opacity, which the compositor handles on the GPU. This tool defaults to transform for exactly this reason.
Forgetting fill-mode makes an entrance animation snap back to the start the moment it ends. If the element should stay at its 100% position, set fill-mode to forwards (or both) — otherwise it blinks back to the 0% values.
Using infinite iteration-count with direction normal causes a hard jump from the 100% keyframe to the 0% keyframe on every loop. If you want a smooth back-and-forth, set direction to alternate so the timeline reverses instead of teleporting.

Privacy

The editor, the live preview, and the CSS code generation all run as plain JavaScript inside your browser tab — no animation data is ever sent to a server, and there is no logging of what you build. One caveat: your full keyframe configuration is encoded into the shareable URL query string, so if you paste a "share link" into Slack or a ticket, the destination server's access log will contain that animation spec. For a public UI animation that is harmless; copy the CSS output directly if the motion is part of an unreleased product. Your last session is also saved in this browser's localStorage and never leaves the device.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

CSS Keyframes Animation Generator

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Keyframes Animation Generator fits into your work

Color jobs

Color checks

Good next steps

Real-world use cases

Build a reusable entrance animation for a design system

Prototype a loading spinner without reaching for a GIF

Tune a "pulse" attention animation for a CTA

Hand a developer a copy-paste animation from a Figma spec

Debug why an animation jumps instead of easing

Common pitfalls

Privacy

FAQ

Cubic Bezier Editor

CSS Transform Generator

CSS Loaders Generator

CSS Gradient Generator

CSS Grid Visual Generator

Glassmorphism Generator

CSS Border Radius Generator

CSS Box Shadow Generator

CSS Clip-Path Generator

Color Blindness Simulator

Color Contrast Checker

Color Converter