CSS Animation Studio
Build CSS keyframe animations, transitions and transforms with a live preview and copyable code, including which properties are cheap to animate.
The preview box has a hover style — mouse over it (or tap Play) to see the transition. Custom curves: Cubic Bezier Generator.
All 14 presets move only the two free properties
A browser can hand transform and opacity to the compositor: the
element is already drawn, and moving or fading it means reusing that drawing with different
settings. Every other property needs at least a repaint, and the geometric ones — width,
height, top, margin — need the layout recalculated first, for the element and often for
its neighbours.
Checked against their own keyframes, all 14 presets here animate
opacity or transform and nothing else. 12 of them use transform; only the 2 fades work on
opacity alone.
That is not a matter of taste — it is why they stay smooth on a phone.
| Transition property | What it costs per frame | |
|---|---|---|
| all (default) | layout | whatever changes, including geometry |
| transform | compositor | no repaint needed |
| opacity | compositor | no repaint needed |
| background-color | repaint | redrawn every frame |
| box-shadow | repaint | redrawn every frame, and expensively |
The transition section is where the care runs out: 2 of the
5 options are free and 3 are not. The default, all, is the only one that can trigger layout — and it does
it conditionally, animating whatever happens to differ. Add a width change to the rule six
months later and a smooth transition becomes a janky one, with no edit to the transition
itself. Naming the property you mean is the cheapest fix in CSS.
A duration is really a number of frames
At 60 frames a second each frame gets 16.67 milliseconds to be produced; on a 120 Hz screen, 8.33. Miss the budget and the frame is simply not shown.
| Duration | Frames at 60 Hz | Frames at 120 Hz |
|---|---|---|
| 0.15s | 9 | 18 |
| 0.3s | 18 | 36 |
| 0.5s | 30 | 60 |
| 1s | 60 | 120 |
| 2s | 120 | 240 |
Under about 10 frames an animation reads as a jump rather than a movement, which puts 0.15s — 9 frames — roughly at the floor for anything you want noticed. A faster screen does not shorten the animation; it subdivides it, which is why the same duration looks smoother on better hardware and identical on paper.
The copied CSS now asks before it moves
This page will happily generate an animation set to repeat forever, which is exactly what WCAG 2.2.2 asks be stoppable and what makes some people feel unwell. The fix is three lines, and it belongs in the snippet rather than in a paragraph nobody reads — so the generated CSS now carries it, for both the animation and the transition:
@media (prefers-reduced-motion: reduce) {
.element { animation: none; }
}It costs nothing for everybody else, it needs no JavaScript, and it is the difference between a decoration and a problem. If you only take one line from this page, take that one.
How to use
- Choose a preset or start from scratch.
- Set the keyframes, duration and easing.
- Watch the preview and adjust.
- Copy the generated CSS.
Frequently asked questions
Which properties are cheap to animate?
Transform and opacity, and essentially nothing else. Those two can be handled by the compositor without recalculating layout or repainting, so they stay smooth even on modest hardware. Animating width, height, top or margin forces layout on every frame and is the usual cause of janky animation.
Why does animating left feel worse than translating?
Because changing left triggers a layout recalculation for the element and potentially its siblings, on every single frame. A transform moves the already-painted element without disturbing layout at all. The visual result is identical and the cost is not remotely comparable.
What is the difference between a transition and an animation?
A transition interpolates between two states when something changes — a hover, a class toggle. An animation runs a defined sequence of keyframes independently, can repeat, and does not need a state change to start. Transitions are simpler and cover most interface needs.
Should I respect reduced motion preferences?
Yes. Some people experience genuine nausea and vestibular discomfort from movement, and the prefers-reduced-motion media query exists so they can say so. Honouring it — usually by shortening animations to near-zero or replacing movement with a fade — is an accessibility requirement, not a courtesy.
Why does my animation snap back at the end?
Because by default an element returns to its original state when the animation finishes. Setting the fill mode to forwards keeps the final keyframe's values applied, which is almost always what people expect the first time they write one.
How long should an interface animation last?
Between about 150 and 400 milliseconds for most transitions. Faster reads as instant, slower starts obstructing the user. Whatever the duration, an animation the user has to wait for on every interaction becomes irritating quickly, however elegant it looked in isolation.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.