Question 1

What does the CSS transition shorthand mean?

Accepted Answer

The transition shorthand bundles four values per property in the order property, duration, timing-function and delay — for example transition: opacity 400ms ease 0ms. Duration says how long the change takes, the timing-function shapes its speed curve, and the delay waits before it starts. You can animate several properties at once by separating each set with a comma.

Question 2

How do I transition more than one property?

Accepted Answer

List each property as its own comma-separated segment, such as transition: transform 450ms ease-out, opacity 450ms ease. Each segment can have its own duration, timing-function and delay, so you can stagger or sync the properties independently. Using transition: all applies the same timing to every animatable property at once.

Question 3

What is the difference between a timing-function and a duration?

Accepted Answer

Duration is the total time the transition takes, measured in milliseconds or seconds. The timing-function (ease, linear, ease-in, ease-out, ease-in-out or a cubic-bezier curve) controls how the speed is distributed across that time — whether it starts slow, ends slow, or moves at a constant rate. Two transitions can share a duration yet feel very different depending on the timing-function.

Question 4

When should I use a cubic-bezier instead of a keyword?

Accepted Answer

The keywords ease, ease-in, ease-out and ease-in-out cover most needs, but a custom cubic-bezier(x1, y1, x2, y2) lets you fine-tune the exact feel or create overshoot. When the y values go above 1 or below 0 the motion springs past its target and settles back, giving playful, bouncy UI animation that the keywords cannot produce.

Question 5

Why does my CSS transition not animate?

Accepted Answer

A transition only runs when an animatable property actually changes between two states, for example on :hover, on focus, or when a class is toggled. Make sure the property is listed in the transition (or use all), that the value really differs, and that the property is animatable — properties like display cannot be transitioned. The duration must also be greater than zero.

CSS TransitionGenerator

CSS Transition
Generator