CSS transition shorthand with multiple properties?

Question

I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. This doesn't do anything:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

I add the show class with javascript. The element becomes higher and visible, it just doesn't transition. Testing in latest Chrome, FF and Safari.

What am I doing wrong?

EDIT: Just to be clear, I'm looking for the shorthand version to scale my CSS down. It's bloated enough with all the vendor prefixes. Also expanded the example code.

Lanctot

Check this documentation. developer.mozilla.org/en/CSS/CSS_transitions – Lilas

Do you actually change the values of height and opacity? Otherwise they do not change – Keelby

I'm not too well-versed with CSS transitions - are the double .5s values after opacity intended? – Sternmost

The documentation does not give an example for using the shorthand version with multiple properties. Height changes from 0 to 200px, opacity from 0 to 1. The second .5s is a delay on the opacity transition. I want an element to grow in height, and when that is finished, fade it in. – Lanctot

Ah yes, the delay value. – Sternmost

Answer 1

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

Uphroe

Have you tried this? It doesn't work for me. I also can't use the all property as I have a delay on the second property. – Lanctot

It works in Chrome 17, Firefox 10, Safari 5. No means to try IE right now :(. Here is the jsfiddle: jsfiddle.net/remibreton/qAxnK – Sextant

I've updated the jsfiddle to work with delays: jsfiddle.net/remibreton/qAxnK/1 – Sextant

It seems to work, I'll look into my project and see if I can get it working. Thanks. – Lanctot

Is there any performance/memory/other implications to using all instead of listing the specific properties? E.g., if I'm planning to transition background and color only - am I better off specifying both, or just using all? Also - given that IE6-9 doesn't support transitions, and IE10 supports them unprefixed - is there any upside/downside to including the ms-transition: directives? – Inconsequent

There is definitely a performance impact when transitioning all properties instead of simply the one you need. It might cause serious damage if you have a lot of elements transitioning all properties at the same time. About ms-transition, I don't know of any reason, now that IE10 is out, why anyone would still use ms-transition instead of the standard transition. It won't cause any trouble to have both, but it will, especially on a transition-heavy stylesheet, bloat your CSS. More importantly, the file size will also take a hit. – Sextant

I had the same issue and it appeared that using "transition: opacity 1s .5s, max-height .5s 0" wasn't not working while "transition: opacity 1s .5s, max-height .5s 0s" was. First time I see an unit required for a zero value in css! – Footrest

It's worth pointing out that using 'all' is slower than specifying specific properties. – Belfast

Answer 2

If you have several specific properties that you want to transition in the same way (because you also have some properties you specifically don't want to transition, say opacity), another option is to do something like this (prefixes omitted for brevity):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

The second declaration overrides the all in the shorthand declaration above it and makes for (occasionally) more concise code.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

Demo

Aerostat

This is useful! Not just because of the transition-property override, but also because for example transition-delay needs to be specified after the shorthand (at least in webkit). In other words the shorthand implies a transition-delay of 0 and putting a standalone delay before the shorthand sets it back to 0. – Abirritate

@Abirritate you can do transition: [props] [duration] [easing] [delay] in every modern browser – Aerostat

Prefer this answer MUCH more than the accepted answer. – Cilice

@duncanwilcox, can you clarify what you mentioned. If I added a delay before the shorthand, does that not get applied? that doesn't seem to be the case, but just wanted to understand what you mean. Is that what @Aerostat clarified? That delay works fine!! – Fortaleza

Answer 3

I made it work with this:

.element {
   transition: height 3s ease-out, width 5s ease-in;
}

Obadiah

This is what I was looking for - shorthand for multiple properties. Thanks! – Ashbaugh

This is a straight-forward way to combine multiple transitions. But if there are more than 3 properties to transition it starts to get clunky. @Jason's answer would be the right approach in that case. Although it need a little bit of initial understanding – Fortaleza

Answer 4

One important thing to note is that the CSS transition property itself is a shorthand - as mentioned in the MDN Web Docs :

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

The ideal use of this shorthand is to combine the various Constituent properties of a single transition. If this is used to combine multiple transitions, it will start to get clunky.

So when you have more than 2 transitions on the same element which different constituent properties, it becomes easier to write them individually instead of using the transition shorthand. For example:

This is the shorthand version(Option 1) of multiple transitions on one element:

transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;

As you can see, this gets clunky and a little bit harder to visualize.
The same CSS can be applied like this(Option 2):

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

Of course, ultimately it all just comes down to your preference of typing and maintaining your source code. But I personally prefer the 2nd option.

---

TIP:

Additional benefit of using this is, if one of the Constituent properties is same for all transitions, you don't need to mention it multiple times. For example, in the above example, if the transition-duration was the same(0.5s) for all, you write it like this:

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

Fortaleza

Answer 5

By having the .5s delay on transitioning the opacity property, the element will be completely transparent (and thus invisible) the whole time its height is transitioning. So the only thing you will actually see is the opacity changing. So you will get the same effect as leaving the height property out of the transition :

"transition: opacity .5s .5s;"

Is that what you're wanting? If not, and you're wanting to see the height transition, you can't have an opacity of zero during the whole time that it's transitioning.

Latticework

This doesn't work either, as the height will stay 0 during the transition of the opacity. – Funchal

Answer 6

This helped me understand / streamline, only what I needed to animate:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ This applies for all transition properties (duration, transition-timing-function, etc.) within the '.base' class

Signatory

Answer 7

I think that this should work:

.element {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
}

Terri

this is wrong since you're using all, all other properties will be affected, what he wanna change are just the height and the opacity, not everything – Kozhikode