CSS Transitions

CSS Transitions

CSS transitions create a gradual change between the old and new values of CSS properties. Instead of an eligible property changing immediately, a transition can make the change occur smoothly over a specified amount of time.

Transitions are commonly used for hover effects, focus states, buttons, links, transforms, colors, opacity, and other interface changes that have identifiable starting and ending values.

How Transitions Work

A transition needs a change between property values. The browser can then calculate intermediate values between the starting state and ending state for properties that support animation.

.button {
  background-color: #0088cc;
  transition: background-color 0.3s;
}
.button:hover {
  background-color: #006699;
}

Without the transition, the background color changes immediately when the pointer moves over the element. With the transition, the browser gradually changes from one color to the other over 0.3 seconds.

When the pointer leaves the element, the property transitions back to its original value because the transition is defined on the element's normal state.

transition-property

The transition-property property identifies which CSS property or properties should transition when their values change.

.box {
  transition-property: background-color;
}

Only changes to background-color are included in this transition.

Multiple property names can be separated with commas.

.box {
  transition-property: background-color, transform;
}

The initial value is all, which means all properties that can transition are considered when their values change.

transition-duration

The transition-duration property specifies how long a transition takes to complete.

.box {
  transition-property: transform;
  transition-duration: 0.5s;
}

Time values can be written in seconds using s or milliseconds using ms.

.box {
  transition-duration: 300ms;
}

A duration of 0s produces no visible gradual transition. The initial value of transition-duration is 0s, so a duration normally needs to be specified before a transition becomes visible.

transition-timing-function

The transition-timing-function property controls how intermediate values progress during the transition.

.box {
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease;
}

The initial timing function is ease. CSS also provides functions such as cubic-bezier() and steps() for more specific timing behavior.

.box {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

transition-delay

The transition-delay property specifies how long the browser waits before beginning a transition after the property value changes.

.box {
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0.2s;
}

This transition waits 0.2 seconds before the opacity begins changing.

The initial delay is 0s, so transitions normally begin immediately. Negative delay values are also allowed and cause a transition to begin as though it had already been running for part of its duration.

transition Shorthand

The transition shorthand can combine the transition property, duration, timing function, and delay into one declaration.

.box {
  transition: transform 0.5s ease 0.1s;
}

In this example:

When two time values are present, the first is the duration and the second is the delay.

Multiple Transitions

Different properties can use different durations, timing functions, or delays by separating transition definitions with commas.

.box {
  transition: background-color 0.3s ease,
              transform 0.5s ease-out,
              opacity 0.4s linear;
}

Each comma-separated item defines a transition for a particular property.

This allows one element to coordinate several visual changes without requiring every property to use the same timing.

Transitioning Transforms

Transitions and transforms are frequently used together. The transform defines the visual change, while the transition controls how that change progresses over time.

.card {
  transform: scale(1);
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.1);
}

The card smoothly increases in visual size when the pointer moves over it and returns to its original scale when the pointer leaves.

Translation and rotation can be transitioned in the same way.

.box {
  transform: translateX(0);
  transition: transform 0.4s ease;
}
.box:hover {
  transform: translateX(30px);
}

Properties That Can Transition

Many CSS properties can transition because the browser can calculate intermediate values between their starting and ending states.

Not every CSS property can be smoothly interpolated between every pair of values. Some changes are discrete rather than gradual, while others have specific interpolation rules.

Using transition: all

The all keyword allows every property that can transition to participate when its value changes.

.box {
  transition: all 0.3s ease;
}

This can be convenient for simple examples, but explicitly naming the properties being transitioned usually makes the intended effect clearer and prevents unrelated property changes from unexpectedly receiving the same transition.

.box {
  transition: background-color 0.3s ease,
              transform 0.3s ease;
}

This version makes it clear that only the background color and transform are intended to transition.

Transition Practices

Transitions are most effective when they support an interface change without making interaction feel unnecessarily slow or distracting.

When transitions include significant motion, consider visitors who request reduced motion. The Accessibility tutorials cover reduced-motion techniques in more detail.

CSS Transition Example

The following example transitions the background color and transform when the pointer moves over the box.

.box {
  background-color: #0088cc;
  transform: scale(1);
  transition: background-color 0.4s ease,
              transform 0.4s ease;
}
.box:hover {
  background-color: #006699;
  transform: scale(1.15);
}

Open the example in the editor and change the duration and timing function. You can also change the transform to rotate() or translateX() to see how transitions work with different transform functions.