CSS: Transition

By Xah Lee. Date: . Last updated: .

CSS transition lets you have smooth change of CSS values.

Here's a simple example.

mouse hover over me

Here's HTML code:

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

Here's CSS code:

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

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

#tran92623: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's the CSS code:

#mtran52461
{
 display:table;
 border:solid thick red;
 padding:1ex;
 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;
 }

#mtran52461:hover
{
 width:100px;
 height:100px;
 border-radius:4ex;
 box-shadow:5ex 5ex 5ex 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's the full syntax.

transition: spec_1, spec_2, spec_3, …

Each of the spec can have this form:

css_property_name duration timing_function 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.
timing_functioncontrols 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.

CSS Transitions#transition-shorthand-property

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

Transition Timing Function

timing_function controls how the value changes over time.

pre-defined 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: JS: Fade a Element Using CSS Transition

Which CSS properties can have transition?

See: CSS Transitions#animatable-css

CSS Effects

  1. CSS: Round Corners
  2. CSS: Box Shadow
  3. CSS: Text Shadow
  4. CSS Triangle
  5. CSS: 2D Transform
  6. CSS: Image Rollover
  7. CSS: Background Image
  8. CSS: Transition
  9. CSS: Animation
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon