Animation & Motion · Free generator

CSS Transition Generator

Free · no sign-up Live preview · copy or download the CSS

Pick what animates, how long, after what delay, and with which easing — then hover the preview to feel it. The output is the one-line transition that makes interfaces feel intentional.

Settings

hover me
Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 20 minCSS TransitionsThe full transition model.STEP 2 · 25 minCSS TransformsThe best properties to animate.STEP 3 · 20 minCSS Performance & Best PracticesCheap vs expensive animation.


  1. CSS Cubic Bezier EditorAnimation & Motion
  2. CSS Hover Effects GeneratorAnimation & Motion
  3. CSS Keyframes GeneratorAnimation & Motion
  4. CSS Button GeneratorTypography & Buttons
  5. CSS Loader GeneratorAnimation & Motion


How it works


A transition is a contract: when these properties change, animate the change. The shorthand order is property, duration, easing, delay. Declare it on the base state (not :hover) so the animation runs both directions.


Easing carries the personality — ease-out feels responsive (fast start), the spring preset overshoots playfully, steps() is deliberately mechanical. Draw your own curves in the Cubic Bezier Editor.


Run the code — try it yourself
Give .box a 250ms ease-out transition and a hover state that lifts it 6px with a stronger shadow.


exercise.html — editable


Frequently asked questions
Why put transition on the element, not :hover?
On :hover it only applies while hovering — the exit snaps instantly. On the base rule it animates in and out.
What duration should I use?
Interface consensus: 150–300ms for hovers and toggles, up to ~500ms for larger reveals. Longer starts to feel like waiting.
transition vs animation?
Transitions animate between two states on a trigger; @keyframes animations run sequences independently — see the Keyframes Generator.


Keep going
Motion is meaning: fast-out easings say 'responsive', overshoots say 'playful'. The full theory is in CSS Transitions; hand-drawn curves in the Cubic Bezier Editor.
CSSmatic is a non-profit project, made by developers for developers.