| Interactive Media Design

CSS Transitions

CSS Transitionsopen in new window facilitate a sense of motion by replicating a natural change from one state to another. When you drive your car it does not go from zero to 60 km/hr in a flick, it is a gradual change, the same concept is applied using transition, rather than changing a property value in a flick we apply a sense of gradual change.

CSS transitions offer control over how a property or properties change by transitioning the change between beginning state and end state. Developers, designers and authors can control the duration, timing and when a transition begins. The list of properties that can be transitioned is extensiveopen in new window but keep in mind that not all properties can be animated.

Transition Properties

Transitions are controlled by four properties: transition-propertyopen in new window, transition-durationopen in new window, transition-delayopen in new window, transition-timing-functionopen in new window.

.box {
  transition-property: background;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transition-delay: 0.5s;
}

transition-property

Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.

NOTE

The all keyword can be used to apply the transition to all properties.

Default value: all

.box {
  transition-property: background;
}
.card{
  transition-property: width, height;
}
.title{
  transition-property: all;
}

transition-duration

Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.

Default value: 0s

.box {
  transition-property: background;
  transition-duration: 0.3s;
}
.card {
  transition-property: width, height;
  transition-duration: 0.5s, 1s;
}

transition-timing-function

Specifies the timing function to use during the transition. Timing functionsopen in new window are used to determine the rate of the transition over the duration. For example, does the transition happen quickly at the beginning and slow down at the end.

We can create custom timing functions using cubic-bezier.comopen in new window or use predefined functions from easigns.netopen in new window

Default value: ease

transition-delay

Defines how long to wait between the time a property is changed and the transition actually begins.

Default value: 0s

transition

The transitionopen in new window property can be used as a shorthand for the transition properties. Order does not matter, but the first time value given will be applied to the transition-duration.

.box {
  /* transition shorthand */
  transition: background 0.3s ease-out 0.5s;
}

Compound Transitions

While it is possible to use the all to add a transition affect to multiple properties, it is inadequate if those properties need to have different duration or delay times. It might be tempting to add a second transition property as shown below.

.box {
  /* will not work as expected */
  transition: width 0.3s 0.5s; 🚫
  transition: height 0.5s 1s; 
}

Note

Instead of adding both transitions, the first will be overwritten by the second. Fortunately there is a way to add multiple transitions to the same transition property, by separating each transition statement with a comma.

.box {
  /* the right way */
  transition: width 0.3s 0.5s, height 0.5s 1s;
}

Examples

Further Review

Review the following material and be sure to download the lesson file to begin exploring transitions.

See Also

References

Reach Ahead

This YouTube video was created by Steve Griffith.