Transitions

The shift between two states like a button changing color when hovered—can feel jarring if it happens instantly. CSS Transitions allow you to bridge that gap by animating the change over time. It is the simplest and most performant way to create movement on the web.

1. The Anatomy of a Transition

A transition requires four main components to work. You can define them individually or use the transition shorthand.

Transition Properties
PropertyDescription
transition-propertyThe specific CSS property you want to animate (e.g., background-color).
transition-durationHow long the animation takes (e.g., 0.5s or 300ms).
transition-timing-functionThe "speed curve" (acceleration/deceleration) of the effect.
transition-delayHow long to wait before the animation starts.

Code Block Loading...

2. Interactive Transition Demo

In this example, we apply a transition to the purple circles. When you hover over them, the background color changes smoothly. The yellow circles have no transition, so they "snap" instantly.

Code Block Loading...

3. Understanding Timing Functions

The transition-timing-function determines how the speed of the transition varies over its duration.

  • linear: Same speed from start to finish.
  • ease: Starts slow, gets fast, ends slow (Default).
  • ease-in: Starts slow, then speeds up.
  • ease-out: Starts fast, then slows down.
  • cubic-bezier: Allows you to define a custom acceleration curve for unique, bouncy, or mechanical movements.

Interactive Timing Demo

Code Block Loading...

4. What Can You Animate?

Not every CSS property can be transitioned. Generally, any property that has a measurable numeric value (like pixels, percentages, colors, or angles) is animatable.

Commonly Animated Properties:

  • Layout: width, height, margin, padding, top, left.
  • Visuals: background-color, opacity, box-shadow, filter.
  • Movement: transform (rotate, scale, translate), z-index.
Note: Properties like display: none cannot be transitioned because they don't have an intermediate state. To fade an element out, transition its opacity or visibility instead.

5. Debugging in Browser DevTools

Both Chrome and Firefox offer powerful visualizers for transitions. When you inspect an element with a transition, look for a small "curve" icon next to the timing function in the Styles panel.

Clicking this allows you to drag points on a graph to live-edit the "feel" of your animation without touching your code.

Key Takeaways

  • Subtlety is Key: Most UI transitions should be between 0.2s and 0.4s. Anything longer can feel sluggish to the user.
  • Hardware Acceleration: For the smoothest 60fps animations, focus on transitioning transform and opacity.
  • The "All" Keyword: You can use transition: all 0.3s to animate every changing property at once, but for better performance, name specific properties.
  • State-Based: Transitions only trigger when a property value changes (e.g., via :hover, :focus, or by changing a class with JavaScript).