CSS Animation Generator
Pick a keyframe, set duration, timing function and iteration count — get ready-to-use CSS animation code instantly, 100% in your browser.
Controls
Preview
CSS Code
What is the CSS animation property?
The CSS animation property is a shorthand that lets you animate an element from one style to another without JavaScript. It combines animation-name (the keyframe rule to use), animation-duration (how long one cycle takes), animation-timing-function (the acceleration curve), animation-delay, animation-iteration-count (how many times to repeat), animation-direction, and animation-fill-mode. With a few lines of CSS, you can create spinners, pulses, bounces, fades, and slides that run purely in the browser.
Animations are GPU-accelerated when they animate transform and opacity, making them smooth and performant. They are the recommended approach for repetitive decorative motion because they require no JavaScript and can be paused, reversed, or looped with simple CSS changes.
Animation properties explained
The CSS animation shorthand accepts several sub-properties. Understanding each one helps you build the exact motion you want:
| Property | What it controls |
|---|---|
| animation-name | The name of the @keyframes rule that defines the animation stages |
| animation-duration | How long one cycle takes (e.g. 2s, 500ms) |
| animation-timing-function | The acceleration curve: linear, ease, ease-in, ease-out, ease-in-out |
| animation-iteration-count | How many times the animation repeats (a number or infinite) |
This tool exposes the four most important properties. The full shorthand also includes delay, direction, fill-mode, and play-state, which you can add manually after copying the generated code.
Keyframes and timing functions
A CSS animation is driven by an @keyframes rule, which defines the styles at various points along the timeline. For example, @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } rotates an element a full turn. You can use percentage stops (0%, 50%, 100%) for more complex multi-stage animations like a bounce that moves up and then back down.
The timing-function controls how the animation progresses within each cycle. linear moves at a constant speed. ease starts slow, speeds up, then slows down. ease-in starts slow and accelerates. ease-out starts fast and decelerates. ease-in-out is slow at both ends. For a natural feel, ease or ease-in-out are usually the best choices; for loading spinners, linear is preferred so the rotation looks steady.
When to use CSS animations
CSS animations are ideal for any repetitive, decorative motion that does not require complex sequencing logic. Common use cases include loading spinners that rotate continuously, pulsing buttons or badges to draw attention, bouncing icons for playful interactions, fading elements in and out for subtle transitions, and sliding notifications or toasts into view. They are also used for entrance animations on page load, where elements animate from an initial state to their final position.
For animations that need to react to user input, start on a specific event, or coordinate multiple elements, JavaScript-controlled transitions or the Web Animations API may be more appropriate. But for self-running, looping, or one-shot decorative motion, CSS animations are simpler, more performant, and require zero JavaScript.
How to generate CSS animations
This tool lets you design animations visually: pick a keyframe preset (spin, pulse, bounce, fade, or slide), set the duration with the slider, choose a timing function from the dropdown, and select an iteration count. The preview animates in real time so you can see the effect, and the CSS code — including the @keyframes rule — is generated automatically. Click Copy CSS to get the code and paste it into your stylesheet.
Everything runs locally in your browser — no data is sent to any server, so your design choices are completely private.
How do I create a CSS animation?
Define a @keyframes rule and apply it with animation: spin 2s linear infinite;. The shorthand combines name, duration, timing, and iteration count.
What is the difference between ease and linear?
linear moves at a constant speed throughout. ease starts slow, speeds up in the middle, and slows down at the end, giving a more natural feel.
How do I make an animation loop forever?
Set animation-iteration-count: infinite; or use infinite in the shorthand: animation: spin 2s linear infinite;.
Are my inputs uploaded to a server?
No. All processing is local. Your animation settings never leave your browser.