ColorKitFree CSS animation builder
CSS animation generator with 14 effects ready to run
This CSS animation generator is free and needs no signup: pick one of fourteen effects — fade, slide, zoom, pop, shake, wobble, pulse, heartbeat, bounce, spin or a color pulse between a hue and its complement — and tune duration, delay, easing, iteration count, direction and fill mode while the browser runs the result in front of you. What you copy is the whole thing: a class with the animation shorthand, or all eight longhand properties, plus the @keyframes block underneath it, because neither half works alone. The preview is the generated CSS itself, so fill-mode and direction behave here exactly as they will in your stylesheet.
- 100% free
- No signup
- 14 effects
- Keyframes included
- Reduced-motion aware
Finishes 500ms after the class lands: 0ms of delay, then 1 × 500ms. With both the first frame covers the delay and the last frame stays put afterwards.
The complete rule
.slide-up {
animation: slide-up 500ms cubic-bezier(0.4, 0, 0.2, 1) 0ms 1 normal both;
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}How to generate a CSS animation
Pick, tune, copy — and the keyframes come with it.
Take an effect off the shelf
The fourteen presets are grouped by the job they do rather than by what they look like: five entrances for something arriving, two exits for something leaving, three attention effects for something that needs noticing, and four continuous loops. Choosing one loads the duration and timing function it was designed around — 400ms and ease-out for fade-in, 1,200ms and linear for spin — so the starting point is already sensible rather than a uniform one second.
Tune the six properties the shorthand carries
Duration and delay run on sliders in 50ms steps, iteration count goes to 20 or flips to infinite, and direction and fill mode are the two that change behavior rather than appearance. Watch fill mode in particular with a delay set: at none the element sits in its own styles until the animation starts and snaps back the moment it ends, at both the first frame covers the delay and the last frame stays put. The line under the controls states what the current combination means and when the run finishes.
Take the rule, keyframes and all
Copy the rule gives you a class containing the animation shorthand plus the @keyframes block the preview is actually running — the two halves are useless apart, which is why they are copied together. Tick the longhand box if your codebase spells out all eight properties, and press Run it again to restart from the top without touching the values, which is the only way to judge an entrance you have watched twenty times.
Technical specifications
| Effects | 14, grouped by job: 5 entrances, 2 exits, 3 attention effects and 4 continuous loops, each with its own designed duration and curve |
|---|---|
| Duration | 100ms to 10,000ms in 50ms steps |
| Delay | 0 to 5,000ms in 50ms steps |
| Iteration count | 1 to 20, or infinite |
| Timing functions | 8 — the five CSS keywords, Material's standard curve, an overshoot curve at (0.34, 1.56, 0.64, 1) and steps(6, end) |
| Direction and fill | 16 combinations: normal, reverse, alternate and alternate-reverse against none, forwards, backwards and both |
| Output | A class holding the shorthand, or all eight longhand properties, together with the @keyframes block the preview is running |
| Reduced motion | Detected with matchMedia; the preview holds its first frame and offers a per-visit opt-in, and nothing about the choice is stored or reported |
Frequently asked questions
What order do the values in the animation shorthand go in?
Almost any order, with one rule that matters: the first time value is the duration and the second is the delay. Everything else — the timing function, the iteration count, the direction, the fill mode, the play state — is matched by shape rather than by position, so animation: 2s ease-in 1s infinite and animation: infinite ease-in 2s 1s are the same declaration. The one real hazard is the name: if your animation is called running or ease the parser will read it as a play state or a timing function, so put a name like that last, where nothing else can claim it.
What does animation-fill-mode: both actually do?
It applies the first keyframe before the animation starts and keeps the last one after it finishes, which is backwards and forwards at the same time. Without it an element with animation-delay: 400ms spends those 400ms fully visible in its own styles and then jumps back to opacity 0 to begin fading in — the flash that makes staggered lists look broken. both is the right default for entrances; forwards alone is right when the element should be invisible until its moment; none is right for a loop that must leave no trace.
Why does my element flash before the animation begins?
Because the delay is running and no fill mode is holding the first frame. During animation-delay the element renders with its normal styles, so a card that is meant to arrive at opacity 0 is on screen at full opacity for the whole delay, then vanishes and fades in. Setting backwards or both fixes it in one word. The same flash at the other end — an element popping back after a smooth finish — is the forwards half of the same missing property.
Does direction: alternate double how long the animation takes?
No. animation-duration is the length of one iteration and alternate does not change it; it changes which way each iteration plays, odd ones forwards and even ones in reverse. A there-and-back trip therefore needs iteration-count: 2 as well, and takes twice the duration because it is two iterations, not because alternate stretched anything. alternate-reverse is the same idea starting backwards, which matters only when the count is odd.
Which properties are actually cheap to animate?
transform and opacity, because the compositor can handle them without asking the rest of the engine anything. A 60Hz display gives you 16.7ms per frame and a 120Hz one 8.3ms; animating width, height, top, left, margin or padding spends part of that budget recalculating layout for the whole document, and animating background-position or box-shadow spends it repainting. The reliable substitution is a transform: translate instead of top, and scale instead of width.
Should I ship an animation to someone who asked for reduced motion?
Not this one, and the check is one media query. WCAG 2.1 success criterion 2.3.3 asks that motion triggered by interaction can be disabled, and prefers-reduced-motion: reduce is how an operating system tells you the user already did. The usual mistake is deleting the animation entirely — a cross-fade or an instant state change is normally the better answer than nothing, because the element still needs to explain that it changed.
Can one element run more than one animation at a time?
Yes: every animation property takes a comma-separated list, and the lists are zipped together by position. animation-name: fade-in, slide-up with animation-duration: 300ms, 500ms gives the first animation 300ms and the second 500ms. If one list is shorter than the name list the browser cycles it from the start rather than treating it as an error, so two names against one duration means both run at that duration — and two names against three durations quietly discards the third.
About the CSS animation shorthand
An animation in CSS is two separate things that have to agree: a named block describing what changes, and a set of properties on an element describing how that block is played. The eight play properties are where the interesting behavior lives, and the two nobody reads the spec for are fill mode and direction. Fill mode decides whether the first keyframe applies before the run and the last one after it — with a delay set and no fill mode, an element that is supposed to arrive at opacity 0 sits fully visible for the length of the delay and then blinks out to start, which is the single most common reason a staggered list looks broken. Direction decides which way each iteration plays, and it does not touch the duration: alternate makes iteration two run backwards, so a there-and-back trip is two iterations of 600ms rather than one of 1.2 seconds.
The shorthand parses by shape rather than by position, which is more forgiving than it looks and has exactly one sharp edge. Any order is accepted; the first time value is taken as the duration and the second as the delay; and a bare identifier is matched against the keyword sets before it is treated as an animation name. That last step is why an animation called running or reverse silently becomes a play state or a direction and the element never moves. If you have named a block by hand on the keyframes generator and it refuses to play, that is the first thing to check — and if the motion plays but reads wrong, the curve is usually the culprit, which is what the cubic bezier generator exists to fix.
Two constraints separate an animation that ships from one that only demos. The first is cost: a 60Hz display leaves 16.7ms per frame, and transform and opacity are the only two common properties the compositor can move without re-running layout or paint for the document — which also means an entrance applied to a child of a flexible container is far cheaper as a translate than as a change of size, whether that container came from the flexbox generator or the CSS grid generator. The second is consent: prefers-reduced-motion: reduce is an operating-system setting people turn on because motion makes them ill, and honouring it is WCAG 2.1 criterion 2.3.3 rather than a nicety. This page detects it, holds the preview on its first frame and asks before playing anything. The color pulse is the one effect that is about color rather than geometry, and it travels to the hue 180° away — see the color wheel for why that distance, and not a smaller one, is what makes the change legible.
Where the animation runs
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The preview works by writing a style element into this document and rewriting it as you move a control, so the animation you are watching exists only in this tab and goes away with it. Changing an effect, a duration or a color issues no network request of any kind, and the reduced-motion opt-in lasts as long as the page is open and is not remembered.