Transitions

Syntax

transition: property duration timing-function delay;

Examples

.button {
  background: #3b82f6;
  transform: scale(1);
  transition: background 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

.risky {
  transition: all 0.3s ease; /* animates EVERY property that changes, even unintended ones */
}

.better {
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* explicit and predictable */
}

Parameters and values

• transition-property (property name | all): Which property(ies) to animate
• transition-duration (time): How long the animation takes
• transition-timing-function (ease | linear | ease-in-out | cubic-bezier()): The pacing curve of the animation
• transition-delay (time): Delay before the transition starts

Best practices

• Prefer transitioning transform and opacity over properties like width or top - they can be animated by the GPU, resulting in much smoother performance
• List specific properties rather than using transition: all, to avoid accidentally animating unrelated property changes
• Keep UI transitions short (150-300ms) - longer durations start to feel sluggish rather than polished
• Respect prefers-reduced-motion by disabling or reducing non-essential transitions for users who have that preference enabled

At a glance

Purpose

Presentation and layout

File extension

.css

Runs in

Web browsers

Usually used with

HTML and JavaScript

Specifications & further reading

• CSS specifications (modules)

Related CSS documentation