Multiple -webkit-transition issue

Posted by ghostbar on September 5, 2010 at 4:24 pm.

While making a CSS layout for a client I had issues with transitions on WebKit-based browsers, I couldn’t make it renderize more than one transition at the same time with the short -webkit-transition, the line was:

-webkit-transition: background-color .25s linear, shadow .25s linear;

Doesn’t works on Safari 3 nor in Google Chrome 6 so I tried splitting out the lines to:

-webkit-transition-property: background-color, shadow;
-webkit-transition-duration:.25s, .25s;
-webkit-transition-timing-function: linear, linear;

And now it works! But it sucks, now I have to write three stupid lines instead of one for the same thing, something that works perfectly on Firefox4 and the draft says explicitly it should work, just:

-moz-transition: background-color .25s linear, shadow .25s linear;

Well, at least works…

http://twitter.com/ben_c ✔ Ben Collier

Yes it’s annoying, however it does mean you can set multiple properties, but only one duration or timing function.

e.g.:
-webkit-transition-property: background-color, shadow;
-webkit-transition-duration:.25s;
-webkit-transition-timing-function: linear;

or:
-webkit-transition: .25s linear;
-webkit-transition-property: background-color, shadow;

ghostbar