What is the difference between a CSS animation and a CSS transition?

A transition animates a single change between two states and needs a trigger such as hover or a class toggle to run. An animation follows a @keyframes sequence with any number of intermediate steps, can loop, and starts on its own as soon as it is applied, without waiting for a state change.

What order does the animation shorthand use?

This tool writes the keyframe name first, then duration, timing-function, delay, iteration-count, direction and fill-mode, for example animation: fadeIn 0.6s ease 1 both. The first time value is always the duration and the second is the delay, so a single time value is read as the duration.

How do I make a CSS animation loop forever?

Set the iteration count to infinite. In the shorthand that is the word infinite, as in animation: spin 1s linear infinite. Any positive whole number instead repeats the animation that many times and then stops on the last keyframe or the first, depending on the fill mode and direction.

Why is my CSS animation not playing?

The most common cause is a mismatch between the animation-name and the @keyframes name, including a typo or a case difference, which leaves the browser with no rule to bind to. Also check that the duration is greater than zero (the Duration slider here goes down to 0ms, which outputs 0s and shows no motion) and that the element is rendered, since an animation on a display:none element does not run. If you pasted the CSS but kept the class name, make sure your element has the animated-element class or rename the selector.

Is there a free CSS animation generator with keyframe presets?

Yes, this one is free, no signup, and ships fourteen presets: Fade in, Fade out, Slide in left, right, up and down, Zoom in, Zoom out, Bounce, Spin, Pulse, Shake, Flip and Heartbeat. Picking a preset loads its own duration, easing and iteration count. The keyframe stops themselves are fixed, so to change a distance such as the 30px bounce height, edit the copied @keyframes rule.

Can I copy both the @keyframes rule and the animation shorthand?

Yes. Copy CSS puts both on the clipboard in one block: the @keyframes rule first, then a .animated-element rule holding the animation shorthand. Rename .animated-element to your own selector, or add that class to the element you want to animate. The @keyframes name, such as fadeIn or spin, must stay the same in both places.

Why does my copied animation look different from the preview?

Usually because your stylesheet already has @keyframes with the same name. The presets use plain names such as spin, pulse and bounce, which some CSS frameworks also define, and the rule that loads last wins. Rename the keyframes in both the @keyframes rule and the shorthand, for example to mySpin, and the collision goes away.

What is the animation-fill-mode property for?

Fill mode decides what styles the element shows before the animation starts and after it ends. The default none means the element snaps back to its normal styles once the animation finishes. Setting forwards keeps the final keyframe applied, backwards applies the first keyframe during any delay, and both does both.

Which properties should I animate for smooth performance?

Prefer transform and opacity. The browser can animate them on the compositor without recalculating layout, so they stay smooth even on lower-end devices. Animating width, height, top, left or margin forces a layout recalculation on every frame, which is the usual reason an animation stutters.

Does this CSS animation generator upload my work anywhere?

No. The keyframes, the shorthand and the preview are all generated in your browser with JavaScript. Nothing is sent to a server, there is no account, and the tool keeps working with no network connection once the page has loaded.

CSS Animation Generator

Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.

Presets

Toolz

Settings

Timing function

Direction

Fill mode

Iterations

Infinite

Duration600ms

Delay0ms

Generated CSS

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animated-element {
  animation: fadeIn 0.6s ease 1 both;
}

Category:css

Mode:Offline

Version:1.0.0

Access:Free

What is the CSS Animation Generator?

The CSS Animation Generator is a visual editor for CSS keyframe animations. You pick a motion preset such as fade in, slide, zoom, bounce, spin or pulse, adjust the duration, timing function, delay, iteration count, direction and fill mode, watch it run in a live preview, then copy two things: the @keyframes rule that defines the motion and the animation shorthand that plays it. It turns a block of CSS most people copy from memory or a framework into something you can shape and see before it reaches your stylesheet.

A CSS animation has two halves that must agree. The @keyframes rule names a sequence of steps, each written as a percentage offset with the property values the element should hold at that point, for example 0% at opacity 0 and 100% at opacity 1. The animation property then references that keyframe name and controls how it plays: how long it lasts, how it eases, how long to wait before starting, how many times to repeat, and which direction each pass runs. A misspelled name is the single most common reason an animation silently does nothing, because the browser has no rule to bind to.

Everything runs in your browser. Choose a preset, drag the duration and delay sliders, switch the easing curve, set the animation to repeat forever or a fixed number of times, and press replay to watch it again. The tool writes the shorthand in a safe order with the keyframe name first, drops the delay when it is zero, and leaves out direction when it is normal and fill mode when it is none, so the output stays readable. The iteration count and timing function are always written, even at their defaults. There is no account, nothing is uploaded, and the generator keeps working once the page has loaded.

It also makes the performance trade-offs visible. The presets animate transform and opacity wherever possible, because those two properties are handled by the compositor and do not force the browser to recalculate layout, so they stay smooth at high frame rates. Animating width, height, top or margin instead recalculates the page on every frame and is the usual cause of stuttering. Seeing a bounce built from translateY rather than top is a quicker lesson in why one is smooth than any amount of reading about it.

Here is what this CSS animation generator produces for one preset, so you can check it against your own copy. Click Bounce and the controls load 1200ms, ease and Infinite, while fill mode stays at its default of both. Copy CSS gives you the seven-stop @keyframes bounce rule plus a .animated-element rule containing animation: bounce 1.2s ease infinite both;. Drag Delay to 300ms and the shorthand becomes bounce 1.2s ease 0.3s infinite both, with the delay placed after the timing function. Any animation generator CSS output should follow that order, because the first time value is always read as the duration.

How to use the CSS Animation Generator?

Choose an animation preset

Pick a motion from the preset list such as fade in, slide in, zoom, bounce, spin, pulse or shake. Each preset loads its keyframes and a sensible default duration and easing.

Adjust the timing and playback

Set the duration and delay, choose a timing function, decide whether the animation repeats a fixed number of times or infinitely, and pick a direction and fill mode.

Preview and replay

Watch the animation run on the preview element and press replay to restart it. Because an animation runs on mount, replay remounts the element so you can see it as often as you like.

Copy the CSS

Copy the generated @keyframes rule and the animation shorthand together, then paste them into your stylesheet and apply the class to any element.

Key Features

Keyframe Preset Library

Fourteen ready-made motions covering entrances, exits and looping effects, from fade and slide to bounce, spin, pulse, shake, flip and heartbeat, each defined with real keyframe stops

Full Playback Control

Set duration, delay, timing function, iteration count, direction and fill mode, and see every change reflected in the shorthand and the live preview at once

Keyframes And Shorthand Together

The output includes both the @keyframes rule and the animation shorthand that binds to it, so you copy a complete, working block rather than half of one

Clean, Spec-Correct Output

The shorthand is written with the keyframe name first, the delay dropped when it is zero, and a normal direction or a none fill mode left out, so the generated CSS reads the way you would write it by hand

Frequently Asked Questions

A CSS keyframe animation is a named sequence of style steps that an element moves through over time. You define the steps in a @keyframes rule, giving each a percentage offset and the property values to hold there, then attach the animation to an element with the animation property, which controls duration, easing, delay and repetition.

Related Tools

CGG

css

CSS Grid Generator

Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.

CTG

css

CSS Transform Generator

Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.

CTG

css

CSS Transition Generator

Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.

text

Character Counter

Count characters, words, sentences and paragraphs live as you type, estimate reading time and byte size, and check your text against social media and SEO length limits.

Comments

0 comments

No comments yet. Be the first to share your thoughts!

css animation generatorkeyframes generatorcss keyframe animationanimation shorthandcss fade in animationcss bounce animationcss spin animationanimation timing functionanimation css generatoranimation generator csscss keyframes presets

Learn more

Read the full CSS Animation Generator guide

Command Palette