What is a CSS keyframe animation?

A CSS keyframe animation defines how an element transitions between style states over time using @keyframes rules. You specify property values at percentage points (0%, 50%, 100%, or 'from'/'to') and the browser interpolates between them. The animation is triggered by applying an animation-name property to an element along with duration, timing, and other parameters.

How do I make a CSS animation loop forever?

Set the Iteration Count to 'Infinite' using the toggle in the Settings panel. This generates animation-iteration-count: infinite in the output, which makes the animation repeat indefinitely. You can combine this with direction: alternate to make the animation ping-pong back and forth.

What is the difference between animation-fill-mode forwards and backwards?

animation-fill-mode: forwards keeps the element in the state of the last keyframe (100%) after the animation ends. animation-fill-mode: backwards applies the first keyframe (0%) state during the delay period before the animation starts. Using 'both' applies both behaviours. The default 'none' reverts the element to its original style before and after the animation.

What does animation-direction: alternate do?

animation-direction: alternate plays the animation forward on odd iterations and backward on even iterations, creating a smooth ping-pong effect. This is commonly used with infinite animations to avoid a jump when the animation resets. 'alternate-reverse' does the reverse — backward first, then forward.

What is a cubic-bezier easing function?

A cubic-bezier() function defines a custom acceleration curve for a CSS animation using four control point values: cubic-bezier(x1, y1, x2, y2). Values range from 0 to 1 for x coordinates and can exceed 1 for y (enabling overshoot/bounce effects). Standard keywords like ease, ease-in, ease-out, and ease-in-out are shortcuts for specific cubic-bezier values.

How do vendor prefixes work for CSS animations?

Older browsers (mainly older WebKit-based browsers) required the -webkit- prefix for animations, written as @-webkit-keyframes and -webkit-animation-*. Toggle the 'Vendor Prefixes' option to include these in the generated output. Modern browsers (Chrome, Firefox, Safari, Edge) all support unprefixed animations natively, so prefixes are only needed for legacy browser support.

What CSS properties can be animated?

Most CSS properties that have discrete or interpolatable values can be animated, including: transform (translate, rotate, scale, skew), opacity, background-color, color, width, height, border-radius, box-shadow, filter (blur, brightness, contrast), clip-path, font-size, letter-spacing, margin, and padding. Properties like display and visibility are not smoothly interpolatable and should be avoided in keyframes.

Can I use CSS animations without JavaScript?

Yes. CSS animations are a pure CSS feature — no JavaScript is required to trigger or run them. Simply add the @keyframes rule and the animation-* properties to your stylesheet. JavaScript can optionally be used to add/remove CSS classes that trigger animations, but the animation itself runs entirely in the browser's rendering engine.

How do I use the generated SCSS mixin?

The SCSS output wraps the animation properties in a @mixin block. Include it in your SCSS file, then apply it to any selector using @include animation-name(). For example: .button { @include fadeIn-animation; }. This lets you reuse the animation across multiple elements without duplicating the animation-* properties.

Is my animation data sent to a server?

No. All animation generation and preview rendering runs entirely in your browser using JavaScript. No keyframe data, property values, or configuration is transmitted to any server. Your animations stay completely private on your machine.

DevFlow

CSS Animation Generator Online — Free Keyframe Builder & Preview Tool

Free online CSS animation generator and keyframe builder. Create complex multi-step CSS animations visually with a real-time animated preview. Configure duration, delay, easing (cubic-bezier, steps), iteration count, direction, and fill mode. Choose from 15+ preset animations (fade, slide, bounce, spin, pulse) or build custom keyframes from scratch. Export clean CSS @keyframes rules, animation shorthand properties, or SCSS mixins with optional vendor prefixes. Runs entirely in your browser — no data is ever sent to a server.

JavaScript is required to use this interactive tool. Please enable JavaScript in your browser, or use our CSS Animation Generator API for programmatic access.

How to CSS Animation Generator Online

Choose a preset animation from the bottom bar (fadeIn, bounce, slideInLeft, spin, pulse, etc.) to load a starting configuration, or begin from the default keyframes.
Edit the animation name in the Settings panel — this becomes the CSS @keyframes identifier and animation-name value.
Adjust Duration and Delay using the sliders or number inputs. Duration controls how long one cycle takes; delay controls how long before the animation starts.
Select a Timing Function from the dropdown: standard keywords (ease, linear, ease-in-out) or popular cubic-bezier presets. Choose 'Custom' to type any cubic-bezier() or steps() value.
Set Iteration Count to a number (e.g. 3) for finite loops, or toggle Infinite for a continuous animation. Choose Direction (normal, reverse, alternate, alternate-reverse) and Fill Mode (none, forwards, backwards, both).
Expand any keyframe stop in the Keyframes section to edit its CSS properties. Add new property rows with 'Add property', delete rows with the trash icon, and add new keyframe stops at any percentage with 'Add stop'.
Watch the live preview update instantly. Switch the preview element shape between Box, Circle, and Text. Use Play/Pause to control playback and adjust the speed multiplier (0.25×–2×).
Toggle 'Vendor Prefixes' in Settings to include -webkit- prefixed variants in the output for legacy browser support.
Switch between output tabs — CSS (full @keyframes + shorthand), Shorthand (animation property only), SCSS (mixin wrapper), and Prefixed (with -webkit-) — then click Copy or Download to export.

CSS Animation Generator Features

Visual CSS animation generator with real-time live preview — see your animation play as you configure it, no page reload needed.
15+ built-in preset animations: fadeIn, fadeOut, slideInLeft, slideInRight, slideInUp, slideInDown, bounce, pulse, shake, wobble, spin, flip, zoomIn, zoomOut, and heartbeat.
Multi-keyframe editor: add unlimited keyframe stops at any percentage offset (0%–100%), each with independent CSS property/value pairs.
Per-keyframe property editor with autocomplete suggestions for commonly animated CSS properties: transform, opacity, background-color, border-radius, filter, clip-path, and more.
Full animation timing controls: duration (0–60s), delay (0–60s), timing function (ease, linear, cubic-bezier, steps), iteration count (finite or infinite), direction, and fill-mode.
Cubic-bezier custom easing support — enter any cubic-bezier() or steps() function directly.
Four output formats: complete CSS (@keyframes + .element block), shorthand only, SCSS mixin wrapper, and vendor-prefixed CSS with -webkit- variants.
One-click Copy to clipboard and Download as .css or .scss file.
Live preview element shape selector: Box, Circle, and Text — with a dot-grid background for visual reference.
Playback speed control (0.25×, 0.5×, 1×, 2×) and Play/Pause/Restart controls in the preview panel.
URL state persistence: animation name, duration, delay, easing, and preset are stored in URL query params for shareable links.
LocalStorage persistence: keyframes, direction, fill-mode, and iteration count are saved between sessions.
AI-enhanced: use the AI sidebar to get animation improvement suggestions, explain easing functions, or generate keyframe ideas.
Runs entirely in your browser — no animation data is ever sent to a server.
Keyboard shortcuts: ⌘⇧C to copy CSS, ⌘⇧K to reset, ⌘⇧X to toggle vendor prefixes.

Frequently Asked Questions

What is a CSS keyframe animation?: A CSS keyframe animation defines how an element transitions between style states over time using @keyframes rules. You specify property values at percentage points (0%, 50%, 100%, or 'from'/'to') and the browser interpolates between them. The animation is triggered by applying an animation-name property to an element along with duration, timing, and other parameters.
How do I make a CSS animation loop forever?: Set the Iteration Count to 'Infinite' using the toggle in the Settings panel. This generates animation-iteration-count: infinite in the output, which makes the animation repeat indefinitely. You can combine this with direction: alternate to make the animation ping-pong back and forth.
What is the difference between animation-fill-mode forwards and backwards?: animation-fill-mode: forwards keeps the element in the state of the last keyframe (100%) after the animation ends. animation-fill-mode: backwards applies the first keyframe (0%) state during the delay period before the animation starts. Using 'both' applies both behaviours. The default 'none' reverts the element to its original style before and after the animation.
What does animation-direction: alternate do?: animation-direction: alternate plays the animation forward on odd iterations and backward on even iterations, creating a smooth ping-pong effect. This is commonly used with infinite animations to avoid a jump when the animation resets. 'alternate-reverse' does the reverse — backward first, then forward.
What is a cubic-bezier easing function?: A cubic-bezier() function defines a custom acceleration curve for a CSS animation using four control point values: cubic-bezier(x1, y1, x2, y2). Values range from 0 to 1 for x coordinates and can exceed 1 for y (enabling overshoot/bounce effects). Standard keywords like ease, ease-in, ease-out, and ease-in-out are shortcuts for specific cubic-bezier values.
How do vendor prefixes work for CSS animations?: Older browsers (mainly older WebKit-based browsers) required the -webkit- prefix for animations, written as @-webkit-keyframes and -webkit-animation-*. Toggle the 'Vendor Prefixes' option to include these in the generated output. Modern browsers (Chrome, Firefox, Safari, Edge) all support unprefixed animations natively, so prefixes are only needed for legacy browser support.
What CSS properties can be animated?: Most CSS properties that have discrete or interpolatable values can be animated, including: transform (translate, rotate, scale, skew), opacity, background-color, color, width, height, border-radius, box-shadow, filter (blur, brightness, contrast), clip-path, font-size, letter-spacing, margin, and padding. Properties like display and visibility are not smoothly interpolatable and should be avoided in keyframes.
Can I use CSS animations without JavaScript?: Yes. CSS animations are a pure CSS feature — no JavaScript is required to trigger or run them. Simply add the @keyframes rule and the animation-* properties to your stylesheet. JavaScript can optionally be used to add/remove CSS classes that trigger animations, but the animation itself runs entirely in the browser's rendering engine.
How do I use the generated SCSS mixin?: The SCSS output wraps the animation properties in a @mixin block. Include it in your SCSS file, then apply it to any selector using @include animation-name(). For example: .button { @include fadeIn-animation; }. This lets you reuse the animation across multiple elements without duplicating the animation-* properties.
Is my animation data sent to a server?: No. All animation generation and preview rendering runs entirely in your browser using JavaScript. No keyframe data, property values, or configuration is transmitted to any server. Your animations stay completely private on your machine.

CSS Animation Generator Online — Free Keyframe Builder & Preview Tool

JavaScript is required to use this interactive tool. Please enable JavaScript in your browser, or use our CSS Animation Generator API for programmatic access.

How to CSS Animation Generator Online

Choose a preset animation from the bottom bar (fadeIn, bounce, slideInLeft, spin, pulse, etc.) to load a starting configuration, or begin from the default keyframes.
Edit the animation name in the Settings panel — this becomes the CSS @keyframes identifier and animation-name value.
Adjust Duration and Delay using the sliders or number inputs. Duration controls how long one cycle takes; delay controls how long before the animation starts.
Select a Timing Function from the dropdown: standard keywords (ease, linear, ease-in-out) or popular cubic-bezier presets. Choose 'Custom' to type any cubic-bezier() or steps() value.
Set Iteration Count to a number (e.g. 3) for finite loops, or toggle Infinite for a continuous animation. Choose Direction (normal, reverse, alternate, alternate-reverse) and Fill Mode (none, forwards, backwards, both).
Expand any keyframe stop in the Keyframes section to edit its CSS properties. Add new property rows with 'Add property', delete rows with the trash icon, and add new keyframe stops at any percentage with 'Add stop'.
Watch the live preview update instantly. Switch the preview element shape between Box, Circle, and Text. Use Play/Pause to control playback and adjust the speed multiplier (0.25×–2×).
Toggle 'Vendor Prefixes' in Settings to include -webkit- prefixed variants in the output for legacy browser support.
Switch between output tabs — CSS (full @keyframes + shorthand), Shorthand (animation property only), SCSS (mixin wrapper), and Prefixed (with -webkit-) — then click Copy or Download to export.

CSS Animation Generator Features

Visual CSS animation generator with real-time live preview — see your animation play as you configure it, no page reload needed.
15+ built-in preset animations: fadeIn, fadeOut, slideInLeft, slideInRight, slideInUp, slideInDown, bounce, pulse, shake, wobble, spin, flip, zoomIn, zoomOut, and heartbeat.
Multi-keyframe editor: add unlimited keyframe stops at any percentage offset (0%–100%), each with independent CSS property/value pairs.
Per-keyframe property editor with autocomplete suggestions for commonly animated CSS properties: transform, opacity, background-color, border-radius, filter, clip-path, and more.
Full animation timing controls: duration (0–60s), delay (0–60s), timing function (ease, linear, cubic-bezier, steps), iteration count (finite or infinite), direction, and fill-mode.
Cubic-bezier custom easing support — enter any cubic-bezier() or steps() function directly.
Four output formats: complete CSS (@keyframes + .element block), shorthand only, SCSS mixin wrapper, and vendor-prefixed CSS with -webkit- variants.
One-click Copy to clipboard and Download as .css or .scss file.
Live preview element shape selector: Box, Circle, and Text — with a dot-grid background for visual reference.
Playback speed control (0.25×, 0.5×, 1×, 2×) and Play/Pause/Restart controls in the preview panel.
URL state persistence: animation name, duration, delay, easing, and preset are stored in URL query params for shareable links.
LocalStorage persistence: keyframes, direction, fill-mode, and iteration count are saved between sessions.
AI-enhanced: use the AI sidebar to get animation improvement suggestions, explain easing functions, or generate keyframe ideas.
Runs entirely in your browser — no animation data is ever sent to a server.
Keyboard shortcuts: ⌘⇧C to copy CSS, ⌘⇧K to reset, ⌘⇧X to toggle vendor prefixes.

Frequently Asked Questions

What is a CSS keyframe animation?: A CSS keyframe animation defines how an element transitions between style states over time using @keyframes rules. You specify property values at percentage points (0%, 50%, 100%, or 'from'/'to') and the browser interpolates between them. The animation is triggered by applying an animation-name property to an element along with duration, timing, and other parameters.
How do I make a CSS animation loop forever?: Set the Iteration Count to 'Infinite' using the toggle in the Settings panel. This generates animation-iteration-count: infinite in the output, which makes the animation repeat indefinitely. You can combine this with direction: alternate to make the animation ping-pong back and forth.
What is the difference between animation-fill-mode forwards and backwards?: animation-fill-mode: forwards keeps the element in the state of the last keyframe (100%) after the animation ends. animation-fill-mode: backwards applies the first keyframe (0%) state during the delay period before the animation starts. Using 'both' applies both behaviours. The default 'none' reverts the element to its original style before and after the animation.
What does animation-direction: alternate do?: animation-direction: alternate plays the animation forward on odd iterations and backward on even iterations, creating a smooth ping-pong effect. This is commonly used with infinite animations to avoid a jump when the animation resets. 'alternate-reverse' does the reverse — backward first, then forward.
What is a cubic-bezier easing function?: A cubic-bezier() function defines a custom acceleration curve for a CSS animation using four control point values: cubic-bezier(x1, y1, x2, y2). Values range from 0 to 1 for x coordinates and can exceed 1 for y (enabling overshoot/bounce effects). Standard keywords like ease, ease-in, ease-out, and ease-in-out are shortcuts for specific cubic-bezier values.
How do vendor prefixes work for CSS animations?: Older browsers (mainly older WebKit-based browsers) required the -webkit- prefix for animations, written as @-webkit-keyframes and -webkit-animation-*. Toggle the 'Vendor Prefixes' option to include these in the generated output. Modern browsers (Chrome, Firefox, Safari, Edge) all support unprefixed animations natively, so prefixes are only needed for legacy browser support.
What CSS properties can be animated?: Most CSS properties that have discrete or interpolatable values can be animated, including: transform (translate, rotate, scale, skew), opacity, background-color, color, width, height, border-radius, box-shadow, filter (blur, brightness, contrast), clip-path, font-size, letter-spacing, margin, and padding. Properties like display and visibility are not smoothly interpolatable and should be avoided in keyframes.
Can I use CSS animations without JavaScript?: Yes. CSS animations are a pure CSS feature — no JavaScript is required to trigger or run them. Simply add the @keyframes rule and the animation-* properties to your stylesheet. JavaScript can optionally be used to add/remove CSS classes that trigger animations, but the animation itself runs entirely in the browser's rendering engine.
How do I use the generated SCSS mixin?: The SCSS output wraps the animation properties in a @mixin block. Include it in your SCSS file, then apply it to any selector using @include animation-name(). For example: .button { @include fadeIn-animation; }. This lets you reuse the animation across multiple elements without duplicating the animation-* properties.
Is my animation data sent to a server?: No. All animation generation and preview rendering runs entirely in your browser using JavaScript. No keyframe data, property values, or configuration is transmitted to any server. Your animations stay completely private on your machine.

CSS Animation Generator Online — Free Keyframe Builder & Preview Tool

How to CSS Animation Generator Online

CSS Animation Generator Features

Frequently Asked Questions

Related Developer Tools

CSS Animation Generator Online — Free Keyframe Builder & Preview Tool

How to CSS Animation Generator Online

CSS Animation Generator Features

Frequently Asked Questions

Related Developer Tools