Developer Tools New Tool

Free Online CSS Animation Generator with Keyframes

Build a CSS animation as it is really written: a keyframes block with as many stops as you need, and the animation shorthand that drives it. Set duration, delay, timing function with an editable cubic-bezier, iterations, direction, fill mode and play state, then watch a real box run it.

Free Forever Nothing Uploaded Keyframes included Runs in your browser

Free Online CSS Animation Generator with Keyframes

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Animation Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

box

CSS

Timing Name Duration ms Delay ms

Easing timing-function

Repeat and state iteration-count infinite direction fill-mode play-state

Keyframe stops Order is per cent, X, Y, scale, rotate, opacity, then an optional background colour.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Animation

A few steps, and nothing is uploaded.

Name it and set the timing The name is what links the keyframes block to the animation property. Duration and delay are in milliseconds here, because that is what most people think in, and they are written out with the unit.

Choose the easing Pick a named curve, or switch to cubic-bezier and edit the four numbers. The two preset buttons give you a soft deceleration and an overshoot, both of which are hard to type from memory.

Build the stops Each stop has a percentage and a few properties: translate on X and Y, scale, rotate, opacity and an optional background colour. Add as many as the movement needs and they are sorted for you.

Watch it and copy The box runs the real animation. Use Restart to play it again from the beginning, which a browser will not do on its own, then copy the keyframes block and the animation rule together.

What to Know About CSS Animations

Including which properties are cheap to animate and which are not.

Only transform and opacity are cheap to animate. Those two can be handled by the compositor, so the browser moves an already painted layer without recalculating layout or repainting. Animating width, height, top, left, margin or padding forces layout on every frame, and animating a colour or a shadow forces a repaint. That is why the stops here offer translate, scale, rotate and opacity: on a busy page they are the difference between a smooth animation and a juddering one. Background colour is offered because it is sometimes genuinely needed, and it does cost a repaint.

The shorthand has an order, and two of the values look the same. animation takes name, duration, timing function, delay, iteration count, direction, fill mode and play state. Duration and delay are both times, and the first time value found is the duration, so animation: fade 0s 2s is not a two second animation. This page writes them in the correct order with both units present, so the rule cannot be misread.

fill-mode is why your element jumps back at the end. With the default none, the element returns to its unanimated state the moment the animation finishes, and it also sits in that state during a delay. forwards keeps the last keyframe, backwards applies the first one during the delay, and both does the two together, which is usually what an entrance animation wants.

This page does not handle multiple animations, or respect reduced motion for you. One name, one keyframes block, one shorthand. It will not write a comma separated list of animations, it cannot parse an existing keyframes block, and it does not add a prefers-reduced-motion media query around the result. If the animation is decorative, wrap it in that query yourself, because some people get motion sick from movement you find subtle.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Keyframes and shorthand Both halves of an animation, generated from the same controls.

Editable cubic-bezier Four numbers you can change, plus named curves and presets.

A real box, really running The keyframes are put in a stylesheet and applied, not simulated.

A restart that works Forces a reflow so the animation plays again from the start.

Correct shorthand order Duration before delay, with units on both, so nothing is misread.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Animation Generator

A CSS animation is two pieces of code that have to agree with each other: a @keyframes block that describes the movement, and an animation property that says how to play it. Most generators give you one or the other. This page keeps them together, because the name links them and a typo in that name is the most common reason nothing happens at all.

The preview is a real animation. The keyframes block is written into a stylesheet in the page and applied to the box, so the timing function, the direction and the fill mode behave exactly as they will in your project. That also means the restart button has to do the trick every developer eventually learns: remove the animation, force the browser to reflow, then put it back, because reapplying the same rule does nothing.

The stop properties are deliberately limited to transform, opacity and background colour. That is not laziness. Transform and opacity are the two things a browser can animate without redoing layout or painting, so an animation built from them stays smooth on a phone, while one built from width and top does not. Background colour is there because interfaces do need it, and it is worth knowing it costs more.

Frequently Asked Questions

Timing functions, fill modes, restarting and reduced motion.

Because the browser only starts an animation when the animation name changes on the element. Setting the same rule again, or editing the keyframes, does not rewind a running animation. The usual fix is to remove the animation, read a layout property such as offsetWidth to force a reflow, then apply it again, which is exactly what the Restart button here does.

They are the X and Y of two control points, in the order x1, y1, x2, y2. The X values must be between 0 and 1 because time cannot run backwards, but the Y values may go outside that range, and that is what produces an overshoot. The Overshoot preset uses a Y above 1 for exactly that reason.

Avoid it where you can. Width and height change layout, so the browser has to recalculate positions on every frame, and on a long page that shows as dropped frames. Scaling with transform: scale() gets a similar visual result on the compositor, though it also scales the content, so it suits boxes and badges better than text blocks.

Wrap the animation in a @media (prefers-reduced-motion: reduce) query and turn it off, or shorten it to a simple fade. This tool does not add that for you, so it is worth doing by hand. Movement that feels gentle to you can make someone else feel unwell, and the operating system setting is how they tell you.

CSS allows it with a comma separated list, and each value in the shorthand can be a list of the same length. This tool builds one animation at a time. If you need two, generate them separately and join the rules by hand, keeping the order of the values consistent across every comma separated position.