CSS3 Transitions

CSS Transitions

Smooth Property Changes

CSS transitions provide a way to control the speed and manner in which CSS properties change from one value to another. Instead of changes happening instantly, transitions allow property changes to occur smoothly over a specified duration.

This is commonly used for creating hover effects, animating UI elements in response to user interaction, or smoothing state changes.

Browser Support

CSS Transitions and their associated properties are widely supported across all modern web browsers. Vendor prefixes are generally no longer needed.

How CSS Transitions Work

To create a transition, you need to define two things on the element you want to animate:

1. Which CSS property(ies) should be transitioned: Specified using transition-property.
2. How long the transition should take: Specified using transition-duration.

The transition effect automatically starts whenever the specified CSS property changes its value (e.g., due to a :hover state, a class being added via JavaScript, etc.).

Example: Transitioning the background-color over 0.5 seconds:

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  /* Define the transition */
  transition-property: background-color;
  transition-duration: 0.5s;
  /* Optional: Add timing function */
  transition-timing-function: ease-out;
}

/* Define the state change that triggers the transition */
.button:hover {
  background-color: darkblue;
}

When the user hovers over the button, the background-color changes from blue to darkblue. Because a transition is defined for background-color, this change happens gradually over 0.5 seconds instead of instantly.

Note: If transition-duration is not specified or set to 0s (the default), the change will be instantaneous, and no transition effect will be visible.

Transition Properties

Several properties control the behavior of transitions:

• transition-property: Specifies the name(s) of the CSS properties to which transitions should be applied. You can list multiple properties separated by commas (e.g., width, background-color, transform) or use the special value all to transition any animatable property that changes.

• transition-duration: Defines the time it takes for the transition to complete (e.g., 2s, 300ms). You can specify different durations for different properties if transitioning multiple properties.

• transition-timing-function: Controls the acceleration curve of the transition (how the intermediate values are calculated). Common values include ease (default), linear, ease-in, ease-out, ease-in-out, steps(), and cubic-bezier(...) for custom curves.

• transition-delay: Specifies a waiting time before the transition actually starts after the property change is triggered (e.g., 1s).

Example: Transitioning multiple properties with different durations and a delay:

.box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  opacity: 0.5;

  transition-property: width, background-color, opacity;
  transition-duration: 2s, 1s, 0.5s; /* width: 2s, background: 1s, opacity: 0.5s */
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s; /* Wait 0.5s before starting all transitions */
}

.box:hover {
  width: 200px;
  background-color: darkred;
  opacity: 1;
}

The transition Shorthand Property

It’s common practice to use the transition shorthand property to set transition-property, transition-duration, transition-timing-function, and transition-delay in one declaration.

The order is important for distinguishing duration and delay (the first time value is duration, the second is delay).

Example using shorthand:

.button {
  background-color: green;
  transform: scale(1);
  /* Shorthand: property duration timing-function delay */
  transition: background-color 0.4s ease-out, transform 0.3s ease;
}

.button:hover {
  background-color: darkgreen;
  transform: scale(1.1);
}

Using all as the property:

.element {
  /* Transition all animatable properties over 0.3 seconds */
  transition: all 0.3s ease-in-out;
}

Animatable Properties

Not all CSS properties can be smoothly transitioned. Generally, properties that accept numeric values (like width, height, opacity, font-size), color values, or certain keywords that can be interpolated (like visibility, transforms) are animatable.

Properties like font-family or display (usually) cannot be transitioned smoothly between different values.

Performance Considerations

For smoother, more performant transitions (especially on less powerful devices), prefer transitioning transform (e.g., translate, scale, rotate) and opacity. These properties can often be handled by the browser’s compositor thread, avoiding costly layout recalculations or repaints.

Transitioning properties like width, height, margin, padding, or top/left can sometimes trigger layout changes, which may be less performant.

CSS Transition Properties Summary

Property	Description
transition	Shorthand property for setting the four transition properties below.
transition-property	Specifies the CSS property or properties to which transitions apply.
transition-duration	Specifies the duration over which the transition occurs.
transition-timing-function	Specifies the speed curve (acceleration) of the transition.
transition-delay	Specifies a delay before the transition starts.