CSS transition shorthand with multiple properties?
Syntax:
transition: <property> || <duration> || <timing-function> || <delay> [, ...];
Note that the duration must come before the delay, if the latter is specified.
Individual transitions combined in shorthand declarations:
-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
Or just transition them all:
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
Here is a straightforward example. Here is another one with the delay property.
Edit: previously listed here were the compatibilities and known issues regarding transition
. Removed for readability.
Bottom-line: just use it. The nature of this property is non-breaking for all applications and compatibility is now well above 94% globally.
If you still want to be sure, refer to http://caniuse.com/css-transitions
CSS transitions for multiple properties
You have correctly added a transition to the html element that is going to be "transitioned" from state x to state y. To engage multiple css properties, use commas, like this example:
transition: width 2s, height 2s, background-color 2s, transform 2s;
How to have multiple CSS transitions on an element?
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
transition: color .2s, text-shadow .2s;
}
ease
is the default timing function, so you don't have to specify it. If you really want linear
, you will need to specify it:
transition: color .2s linear, text-shadow .2s linear;
This starts to get repetitive, so if you're going to be using the same times and timing functions across multiple properties it's best to go ahead and use the various transition-*
properties instead of the shorthand:
transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;
Define multiple transition-property in CSS
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.
Transition Doesn't Work with Multiple Attributes
You can do is all
transition: all 1000ms ease;
It will take affect on all changes
Related Topics
Why Does 'Overflow: Auto' Clear Floats? And Why Are Clear Floats Needed
Full-Screen Responsive Background Image
Bootstrap Icons Are Loaded Locally But Not When Online
How to Make Round Corners to Both Inside of a Box and Its Border
Webkit CSS Animation Issue - Persisting the End State of the Animation
Why Does the Linear-Gradient Disappear When I Make an Element Position:Absolute
Z-Index Does Not Work in Internet Explorer with PDF in Iframe
"Text-Decoration" and the ":After" Pseudo-Element, Revisited
Why Specify @Charset "Utf-8"; in Your CSS File
Differencebetween Pipe (|) and Caret (^) Attribute Selectors
Bootstrap: How to Stack Divs of Different Heights
Ie11 - Does a Polyfill/Script Exist For CSS Variables
How Does Border-Image Work With Linear-Gradient
Div's VS. Tables or CSS VS. Being Stupid