CSS Transitions

CSS Transitions

CSS transitions allow you to smoothly change the value of properties over a given time.

Move the mouse over this element to view the CSS transition effect:

CSS

In this chapter, you will learn the following properties:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Browser support for transitions

The numbers in the table indicate the first browser version that fully supports this property.

properties Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

How to use CSS transitions?

To create a transition effect, you must clearly define two things:

  • The CSS property you want to add the effect to
  • Duration of the effect

Note:If the duration part is not specified, the transition will not take effect because the default value is 0.

The following example shows a red <div> element with a size of 100px * 100px. The <div> element also specifies a transition effect for the width property, lasting for 2 seconds:

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

A transition effect will begin when the value of the specified CSS property (width) changes.

Now, let's specify a new value for the width property when the mouse hovers over the <div> element:

Example

div:hover {
  width: 300px;
}

Try It Yourself

Please note that when the cursor is moved away from the element, it will gradually return to its original style.

Change Values of Several Properties

The following example adds transition effects to both width and height properties, width is 2 seconds, and height is 4 seconds:

Example

div {
  transition: width 2s, height 4s;
}

Try It Yourself

Specify the speed curve of the transition

transition-timing-function The property specifies the speed curve of the transition effect.

The transition-timing-function property accepts the following values:

  • ease - Specifies a transition effect that starts slowly, then accelerates, and then ends slowly (default)
  • linear - Specifies a transition effect that has the same speed from start to end
  • ease-in - Specifies a transition effect that starts slowly
  • ease-out - Specifies a transition effect that ends slowly
  • ease-in-out - Specifies a transition effect that starts and ends slower
  • cubic-bezier(n,n,n,n) - Allows you to define your own values in the cubic Bezier function

The following examples show some different speed curves that can be used:

Example

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Try It Yourself

Delay Transition Effect

transition-delay The property specifies the delay of the transition effect (in seconds).

The following example has a 1-second delay before starting:

Example

div {
  transition-delay: 1s;
}

Try It Yourself

Transition + Transform

The following example adds a transition effect to the transform:

Example

div {
  transition: width 2s, height 2s, transform 2s;
}

Try It Yourself

More Transition Examples

You can specify CSS transition properties one by one, as shown below:

Example

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Try It Yourself

Or use the shorthand transition Properties:

Example

div {
  transition: width 2s linear 1s;
}

Try It Yourself

CSS Transition Properties

The following table lists all CSS transition properties:

properties description
transition A shorthand property used to set the four transition properties as a single property.
transition-delay Specify the delay of the transition effect (in seconds).
transition-duration Specify how many seconds or milliseconds the transition effect should last.
transition-property Specify the name of the CSS property targeted by the transition effect.
transition-timing-function Specify the speed curve for the transition effect.