CSS: Transition

By Xah Lee. Date: . Last updated: .

CSS transition lets you have smooth change of CSS values.

Here is a simple example.

mouse hover over me

Here is HTML code:

<div id="tran82944">mouse hover over me</div>

Here is CSS code:

#tran82944
{
 border:solid thick red;
 width: 50%;
}

#tran82944
{
 transition: width 2s;
 /* when width value changes, do transition, over 2 seconds */
}

#tran82944:hover
{
 width: 100%;
 /* new width value */
 }

The 2s there means a duration of 2 seconds.

Multiple Transitions

You can specify transition for multiple CSS properties. Example:

Hover
Me

Here is the CSS code:

#t18476
{
 display:table;
 overflow-wrap: normal;
 border:solid thick red;
 padding:0.5rem;
 text-align:center;

 width:40px;
 height:40px;
 border-radius:0;
 box-shadow:0 0 black;

 transition:width 1s, height 1s, border-radius 1s, box-shadow 1s;
 }

#t18476:hover
{
 width:100px;
 height:100px;
 border-radius:20px;
 box-shadow:20px 20px 20px gray;
 }

Here, we are changing the element's size, border-radius, and box-shadow.

[see CSS: Box Shadow]

[see CSS: Round Corners]

The syntax is several attributes separated by comma, like this:

transition: width 1s, height 1s, border-radius 1s, box-shadow 1s;

CSS Transition Full Syntax

Here is the full syntax.

transition: spec1, spec2, spec3

Each of the spec can have this form:

cssPropertyName duration timingFunction delay

CSS Transition Properties
NameMeaning
duration is a time spec, for example 3s means 3 seconds. If you want to use 0 second, you must write 0s not just 0.
timingFunctioncontrols how the values change over time. Some predefined values you can use are: {ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, steps(integer, start),steps(integer, end), cubic-bezier(number, number, number, number)}. The default is ease.
delaytime before the transition begin. For example, 0.5s for 0.5 second.

The transition attribute is actually a short form for several other ones:

Transition Timing Function

timing_function controls how the value changes over time.

predefined values you can use are:

The default is ease.

step
Step timing function
TimingFunction
Bézier Timing Function Control Points

Example: Transition Color

mouse hover over the following items.

red to blue
red to yellow
yellow to blue
green to blue

What is the difference between CSS transition and animation?

CSS animation allows one to control every key frame of animation. You specify the exact CSS properties for each key frame. [see CSS: Animation]

CSS transition just animate between 2 CSS values. You can think of transation as animation with just 2 key frames, the beginning frame and end frame.

What other ways to activate a transition?

Transition is activated when a CSS property's value changes. Currently, the only practical way to start a transition is the pseudo element :hover.

Typically, you use JavaScript to change CSS property, and this will trigger transition.

For example of using JavaScript to trigger transition, see: Fade a Element Using CSS Transition

Transform/Animation