Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Define multiple transition-property in CSS

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?

like image 623
bytecode77 Avatar asked Sep 21 '12 23:09

bytecode77


People also ask

How do you use multiple transition properties in CSS?

Transitioning two or more properties You can transition two (or more) CSS properties by separating them with a comma in your transition or transition-property property. You can do the same with duration, timing-functions and delays as well. If the values are the same, you only need to specify one of them.

What is transition property in CSS?

The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.

How many types of transitions are there in CSS?

transition-property. transition-duration. transition-timing-function. transition-delay.

Which CSS property is used for transition effect?

The transition-property CSS property sets the CSS properties to which a transition effect should be applied.


1 Answers

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.

like image 132
BoltClock Avatar answered Oct 07 '22 04:10

BoltClock