Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple css3 transition types not using 'all'

I'm trying to transition both the scale and the opacity using CSS3 transitions - I can't work out how to transition multiple things without using all

transition-function: all;
transition-duration: 1s;
transition-timing-function: ease-in;

works, as does:

transition: all 1s ease-in;

and

transition-function: opacity;

or

transition-function: scale;

but not

transition-function: scale, opacity;

See the example here: http://jsfiddle.net/5PCGs/7/

Any help would be really appreciated! Thanks :) !

Edit:

I have worked out it's transition-property (thanks Simone), but now it's only animating opacity in Firefox, not both - http://jsfiddle.net/5PCGs/9 - compare this in FF and Chrome side-by-side

like image 890
Trolleymusic Avatar asked Dec 03 '22 01:12

Trolleymusic


1 Answers

Thanks to Boris Zbarsky and Simone Vittori.

The answer was to use transition-property and in not specify all the things you're transforming in there, just put transform in as one of the values, and let the differences in the transforms between the classes take care of itself.

transition-property: transform,opacity;
transition-duration: 1s;
transition-timing-function: ease-in;

EDIT: Don't for get to add any prefixes you need to these. For Webkit browsers for example:

-webkit-transition-property: -webkit-transform,opacity;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in;

Thanks again!

like image 155
Trolleymusic Avatar answered Jan 18 '23 23:01

Trolleymusic