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://j开发者_运维技巧sfiddle.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!
Try to use transition-property
instead of transition-function
, that actually doesn't exist. :)
Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined.
精彩评论