Question

When setting transition-property to all, it looks bad when zooming inside the browser window, because width and height properties are also being transitioned. When I only want background and color, I need to define it multi line, though:

transition-property: color, background;
transition-duration: 250ms;

This is bad, because I also have to do it for -webkit-, -moz and -o-. Instead I’m looking for something like this:

transition: [color and background] 250ms;

Is there any syntax for this?

Answer 1

When using the transition shorthand with multiple transitions, you need to repeat the transition duration for each property, and separate each group of values with commas:

transition: color 250ms, background 250ms;

With prefixes, it looks like this:

-moz-transition: color 250ms, background 250ms;
-o-transition: color 250ms, background 250ms;
-webkit-transition: color 250ms, background 250ms;
transition: color 250ms, background 250ms;

Still a little repetitive, but at least it beats repeating transition-property and transition-duration for all the prefixes.

The shorthand syntax is described in the spec.