Transitions

The CSS Podcast - 044: Transitions

When interacting with a website, you might notice that many elements have state. For example, dropdowns can be in opened or closed states. Buttons might change color when focused or hovered. Modals appear and disappear.

By default, CSS switches the style of these states instantly.

Using CSS transitions, we can interpolate between the initial state and the target state of the element. The transition between the two enhances the user experience by providing visual direction, support, and hints about the cause and effect of the interaction.

Transition properties

To use transitions in CSS, you can use the various transition properties or the transition shorthand property.

transition-property

The transition-property property specifies which style(s) to transition.

.my-element {
  transition-property: background-color;
}

The transition-property accepts one or more CSS property names in a comma-separated list.

Optionally, you may use transition-property: all to indicate that every property should transition.

transition-duration

The transition-duration property is used to define the length of time that a transition will take to complete.

transition-duration accepts time units, either in seconds (s) or milliseconds (ms) and defaults to 0s.

transition-timing-function

Use the transition-timing-function property to vary the speed of a CSS transition over the course of the transition-duration.

By default, CSS will transition your elements at a constant speed (transition-timing-function: linear). Linear transitions can end up looking somewhat artificial, though: in real life, objects have weight and can't stop and start instantly. Easing into or out of a transition can make your transitions more lively and natural.

Our module on CSS Animation has a good overview of timing functions.

You can use DevTools to experiment with different timing functions in real-time.

transition-delay

Use the transition-delay property to specify the time at which a transition will start. If transition-delay is not specified, transitions will start instantly because the default value is 0s. This property accepts a time unit, for example seconds (s) or milliseconds (ms).

This property is useful for staggering transitions, achieved by setting a longer transition-delay for each subsequent element in a group.

transition-delay is also useful for debugging. Setting the delay to a negative value can start a transition further into the timeline.

Shorthand: transition

Like most CSS properties, there is a shorthand version. transition combines transition-property, transition-duration, transition-timing-function, and transition-delay.

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

What can and can't transition?

When writing CSS, you can specify which properties should have animated transitions. See this MDN list of animatable CSS properties.