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="tr365">mouse hover over me</div>

Here's CSS code:

 border:solid thick red;
 width: 50%;

 transition: width 2s;
 /* when width value changes, do transition, over 2 seconds */

 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:


Here's the CSS code:

 border:solid thick red;

 box-shadow:0 0 black;

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

 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
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 timing function
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

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

CSS Basics

  1. Basics
  2. Tag Matching Tutorial
  3. Selector Syntax
  4. Units


  1. Color Syntax
  2. Color Names
  3. Opacity
  4. Linear Gradient
  5. Radial Gradient


  1. font-family
  2. Standard Web Fonts
  3. font-size
  4. Meaning of Font Size
  5. Font Weight
  6. Chinese Font Names

Box Model

  1. Border
  2. Outline
  3. Margin vs Padding
  4. Box Sizing


  1. Layout Tutorial
  2. Display Property
  3. Position: static, relative, fixed, absolute
  4. Pure CSS Table
  5. Tabbed Menu
  6. 3 Columns Page Layout
  7. Multi-Column Layout for Text Flow
  8. Fix Element to Window
  9. Centering
  10. Flowing List
  11. z-index
  12. Text Over Image
  13. Text Flow Around Image
  14. OverFlow, Scrollbar


  1. 2D Transform
  2. Transition
  3. Animation

Line Wrap, Justification

  1. Line Wrap
  2. Text Alignment, Justification
  3. Match first-letter and first-line
  4. “:before”, “:after”
  5. Text Decoration: Underline, Overline, Line-Through
  6. Letter Spacing, Word Spacing

Box Decoration

  1. Box Shadow
  2. Text Shadow
  3. Round Corners
  4. Background Image
  5. Image Rollover


  1. Computed Style
  2. Pseudo Class vs Pseudo Element
  3. Media Query
  4. Variable
  5. calc
  6. Reset
  7. user-select
  8. Data URI Scheme
  9. protocol-relative URL
  10. Default Unit
  11. Declaring Character Set in CSS File
  12. Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method
  13. Display Table on Small Screen
  14. Fixed Aspect Ratio
  15. Add Icon to Links
  16. Progress Bar Example

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials