How to Transition Multiple Properties in CSS Easily

To transition multiple CSS properties, use the transition property with a comma-separated list of properties you want to animate, each followed by duration and easing. For example, transition: width 0.5s ease, height 0.5s ease; smoothly animates both width and height changes.

Syntax

The transition property lets you animate changes to CSS properties. To transition multiple properties, list each property with its duration and easing, separated by commas.

• property: The CSS property to animate (e.g., width, background-color).
• duration: How long the animation lasts (e.g., 0.5s for half a second).
• timing-function: The speed curve of the animation (e.g., ease, linear).

css

transition: property duration timing-function, property duration timing-function, ...;

Example

This example shows how to smoothly change both the width and background-color of a box when you hover over it.

css

div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: width 0.5s ease, background-color 0.5s ease;
}
div:hover {
  width: 150px;
  background-color: coral;
}

Output

A square box that grows wider and changes color smoothly when hovered over.

Common Pitfalls

One common mistake is to use transition: all 0.5s ease; which transitions every property, sometimes causing unwanted animations and performance issues. Another is forgetting to separate multiple properties with commas, which breaks the syntax.

Also, ensure the properties you want to animate are animatable; some CSS properties cannot be transitioned smoothly.

css

/* Wrong: missing commas, transitions all properties */
div {
  transition: width 0.5s ease background-color 0.5s ease;
}

/* Right: commas separate each property */
div {
  transition: width 0.5s ease, background-color 0.5s ease;
}

Quick Reference

Property	Description	Example
property	CSS property to animate	width, height, background-color
duration	Time animation takes	0.5s, 1s
timing-function	Speed curve of animation	ease, linear, ease-in-out
delay	Wait time before animation starts	0s, 0.2s
separator	Separate multiple transitions	Comma (,)

Key Takeaways

Use commas to separate multiple properties in the transition property.

Specify duration and easing for each property to control animation timing.

Avoid using 'all' unless you want every property to animate, which can hurt performance.

Only animatable CSS properties can be transitioned smoothly.

Test transitions in the browser to see the visual effect clearly.