CSS: Transition Tutorial

By Xah Lee. Date: . Last updated: .

CSS3 has a transition property. Basically, it creates a animation that changes CSS value from one to another, smoothly, over a period of time.

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 {
 display: table;
 border:solid thick red;

 transition: width 2s; /* ← do transition for property “width”, duration 2 secs */
 width: 60%;           /* ← begin witdth*/
}

#tran92623:hover {
 width: 30%;            /* ← end width */
}

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 tutorial〕 〔►see CSS: Round Corners: border-radius tutorial

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

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 frame of animation. That is, for potentially every frame, you specify the exact CSS properties. 〔►see CSS: Animation Tutorial

CSS transition just jump between 2 CSS values, in a smooth and automatic way.

What other ways to activate a transition?

Transition is activated when a CSS property's (computed) value changes. Currently, the only practical way to start a transition is the pseudo element :hover. 〔►see CSS: What's Computed Style?

Typically, you use JavaScript to set some CSS property, and this will trigger transition for element that has CSS transition set for the changed property.

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

Which CSS properties can have transition?

See: CSS Transitions#animatable-css

Reference

CSS Transitions

CSS Effects

  1. CSS: Round Corners, border-radius
  2. CSS: Box Shadow
  3. CSS: Text Shadow/Outline
  4. CSS Triangle, CSS Shapes
  5. CSS: 2D Transform
  6. CSS: Image Rollover
  7. CSS: Background Image, CSS Sprites Tutorial
  8. CSS: Transition Tutorial
  9. CSS: Animation Tutorial
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.