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
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With