CSS Animation Generator

How to use

Pick the animation. The first eight are entrances and exits; pulse, bounce, shake, spin and flip are for attention or for loading.
Set the duration. Between 200 and 500 milliseconds for an entrance; past about 700 an interface starts to feel slow.
Choose the easing. ease-out for anything arriving, because it starts fast and settles; linear only for a spin, where a constant speed is the point.
Set the distance. It is written as a custom property, so one value drives every frame of a slide, a bounce or a shake.
Copy the CSS. It includes the reduced motion query; leave that in.

Example

@keyframes slide-up {
	0% {
		opacity: 0;
		transform: translateY(var(--distance, 24px));
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.animated {
	--distance: 24px;
	animation: 400ms cubic-bezier(0.22, 1, 0.36, 1) both slide-up;
}

@media (prefers-reduced-motion: reduce) {
	.animated {
		animation-duration: 1ms;
		animation-iteration-count: 1;
	}
}

The guard shortens the animation rather than removing it. animation: none on an entrance that starts at opacity: 0 would leave the element invisible for good, which is the most common way this setting gets broken.

Pitfalls

Animate transform and opacity and nothing else. Those two are handled by the compositor; animating width, top, margin or box-shadow makes the browser lay the page out again on every frame.
prefers-reduced-motion is an accessibility setting, not a preference. Some people get motion sick from a page that slides; the query costs four lines.
Removing the animation is not the same as respecting the setting. Shorten it, or the final state of an entrance never arrives.
Without animation-fill-mode: both, an entrance shows its natural state, flashes to the first frame, then animates. That flash is the bug people describe as “the animation is janky”.
An animation on an element that is not yet in view plays anyway, and is over before anyone sees it. Trigger it with an IntersectionObserver or a class, not on page load.
Anything infinite is a distraction unless it means “waiting”. A pulsing button competes with everything else on the page.
transform on an inline element does nothing. Give it display: inline-block first.
A spin with linear easing and any other easing look completely different; a spin with ease-in-out looks broken, which is why the easings are listed rather than freeform.

Compatibility

Keyframe animations, the animation shorthand and cubic-bezier() easings are supported unprefixed by every browser in use. prefers-reduced-motion needs Chrome 74, Firefox 63 or Safari 10.1. Custom properties inside keyframes work everywhere, though a custom property cannot itself be animated without @property. The tool runs entirely in your browser.

Frequently asked questions

Which properties are safe to animate?

transform and opacity. filter is usually fine too. Everything else risks a layout on every frame.

How long should an animation be?

Short. 200 to 300 milliseconds for something small, 400 to 500 for something entering from a distance.

Why does my animation flash before it starts?

No fill-mode. both holds the first frame until it begins.

What is the difference between an animation and a transition?

A transition runs between two states when one changes. An animation runs a sequence on its own, can repeat, and can have as many steps as you like.

How do I trigger it on scroll?

Add the class with an IntersectionObserver, or use animation-timeline: view() where support allows. Do not rely on it playing on load.

CSS Animation Generator

How to use

Example

Pitfalls

Compatibility

Frequently asked questions

Related tools

Tools

CSS Text Shadow Generator

CSS Clip Path Generator

SVG Wave Divider Generator

AI Wireframe Generator

New tools, when there are new tools