Bring your page to life with CSS transitions

  • Article

Cascading Style Sheets (CSS) transitions enable you to create simple animations by smoothly changing CSS property values over a specified duration of time. For instance, you can vary the size and color of an object over a period of 10 seconds. What you might have previously accomplished using a complicated combination of CSS and JavaScript, you can now do using just CSS.

Example transitions

The following simple example shows how to use CSS transitions to animate the background color and two transforms on an element. You can view a live version of this sample. The following diagram shows this example before the transition occurs and after.

Following is the selector that defines the original appearance of the element:

.TransformDemoDivOriginal {
  opacity: 0.5;
  background-color: #D2D2D2;
  color: black;
}

The following selector defines the element after the transition completes:

.TransformDemoDivOriginal:hover {
  opacity: 1;
  background-color: #F472D0;
  transform: rotate(45deg) translateX(200px);
  transition: all 5s linear 1s;
}

Notice that the opacity and background-color properties have been changed, plus two transform functions have been added. Finally, the transition property is what defines the transition itself.

The transition properties are listed here.

Property Description

transition

Shorthand property that specifies the transition properties in the following order (separated by white space): transition-property transition-duration transition-timing-function transition-delay.

transition-delay

Specifies the offset within a transition (the amount of time from the start of a transition) before the transition is displayed.

transition-duration

Specifies the duration of a transition.

transition-property

Identifies the CSS property name or names to which the transition effect is applied when a new property value is specified.

transition-timing-function

Specifies the intermediate property values to be used during the transition.

 

The last property defined here, transition-timing-function, enables you to define a Bezier curve that specifies how fast the animated values change. Internet Explorer 10 includes several built-in function definitions (for instance, ease, linear, ease-in, ease-out, and so on), as well as a cubic-bezier() function that allows you to specify your own timing functions.

In the previous transition example, the transition property is declared as follows:

transition: all 5s linear 1s;

This is equivalent to the following property declarations:

transition-property: all;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 1s;

The transition-property property is set to "all", which indicates that all the declared properties should be transitioned. The transition-duration property is set to "5s", so the entire transition is five seconds in length. The transition-timing-function property is set to "linear", so the transition will progress evenly from beginning to end. The transition-delay property is set to "1s", so the transition will begin after a one second delay.

To learn more about CSS transitions, check out the following reference sources: