Home › Developer Tools › CSS Animation Generator

CSS Animation Generator

Pick a ready-made animation, tune its timing and watch it play instantly. Edit the keyframes if you like, then copy clean @keyframes and animation CSS for your project.

Animation presets

Keyframes (editable)

Use percentages or from/to, e.g. 50% { transform: scale(1.2); }

Duration

Delay

Timing function (easing)

Iterations

infinite

Direction

Fill mode

Animation name

Apply to selector

Generated CSS

Longhand properties Reduced motion rule

How to use the CSS Animation Generator

Choose a preset such as Bounce, Pulse or Slide in left. It starts playing straight away.
Set the timing: duration, delay, easing, how many times it repeats, direction and fill mode.
Edit the keyframes in the text box to customise the motion; the preview updates as you type.
Name your animation and choose the CSS selector that should use it.
Press Copy CSS (or Download .css) and paste the @keyframes rule and animation declaration into your stylesheet.

CSS animation properties

Property	Default	What it controls
`animation-name`	none	The `@keyframes` rule to run.
`animation-duration`	0s	Length of one cycle, in s or ms.
`animation-timing-function`	ease	Speed curve between keyframes: keywords, `cubic-bezier()` or `steps()`. Can also be set per keyframe.
`animation-delay`	0s	Wait before starting. A negative delay starts part-way through the cycle.
`animation-iteration-count`	1	How many cycles; decimals allowed, or `infinite`.
`animation-direction`	normal	`reverse` plays backwards, `alternate` switches direction every cycle.
`animation-fill-mode`	none	Whether the first/last keyframe styles apply before and after the animation.
`animation-play-state`	running	Set to `paused` to freeze the animation, e.g. on hover.

Shorthand example: animation: bounce 1s ease 0.2s infinite alternate both; runs the bounce keyframes for 1 second with a 0.2 second delay, forever, alternating direction.

Tips for smooth, friendly animations

Stick to transform and opacity for motion and fades; they are GPU-friendly and do not trigger layout.
Keep UI animations short: 150 to 400 ms feels responsive for menus and buttons; entrance effects can take 500 to 800 ms.
Use easing deliberately: ease-out for things entering, ease-in for things leaving. Design your own curve with the Cubic Bezier Generator.
Trigger on scroll or click by adding the class with JavaScript (for example from an IntersectionObserver), and listen for the animationend event to clean up.
Respect reduced motion: keep the prefers-reduced-motion rule so people who disable animations in their system settings are not affected.
Need a spinner instead? The CSS Loader Generator has ready-made loading animations.

Frequently asked questions

What is the order of values in the animation shorthand?

animation: name duration timing-function delay iteration-count direction fill-mode play-state. Only the name and duration are needed in practice. The first time value is always the duration and the second is the delay.

What does animation-fill-mode do?

It decides which styles apply outside the running time. forwards keeps the last keyframe after the animation ends, backwards applies the first keyframe during the delay, both does both, and none (the default) shows the element's normal styles before and after.

How do I make an animation loop forever?

Set animation-iteration-count: infinite. Combine it with animation-direction: alternate to play forwards and then backwards, which gives smooth back-and-forth motion without a jump.

Which properties are best to animate?

transform and opacity. Browsers can animate them on the compositor without recalculating layout, so they stay smooth at 60 fps. Animating width, height, top, left or margin forces layout on every frame and can stutter.

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

A transition runs once between two states when a property changes, for example on :hover. An animation uses @keyframes with any number of steps, can start by itself, repeat, alternate and run with a delay, without any state change.

Should I respect reduced motion settings?

Yes. Some people get dizzy or nauseous from motion. Wrap non-essential animation in @media (prefers-reduced-motion: no-preference) or switch it off in @media (prefers-reduced-motion: reduce). Tick the reduced motion option to add that rule.

Do I need -webkit- prefixes for keyframes?

No. Unprefixed @keyframes and animation properties have been supported in Chrome, Edge, Firefox and Safari for many years, so the generated CSS does not include prefixes.

Related tools