Re: [css-transforms] Specifying different transitions properties for different transform functions

On Mar 26, 2015, at 11:26 PM, Tab Atkins Jr. <jackalmage@gmail.com<mailto:jackalmage@gmail.com>> wrote:

On Thu, Mar 19, 2015 at 3:14 PM, Zacqary Adam Xeper
<zxeper@fastcompany.com<mailto:zxeper@fastcompany.com>> wrote:
Hi everyone. I've run into a problem working with CSS transitions on the
transform property: I'd like to specify a different transition-duration and
transition-timing-function for transform: scale() and transform:
translate(). Unfortunately, the only thing I'm allowed to do is:

transition: transform 0.5s;

What I'd like to be able to do is something like:

transition: scale 0.5s, translate 0.3s;

Obviously that's not the best syntax for it, given that scale and translate
are functions, not properties. But I haven't seen this discussed and I think
it's worth looking into. I'd like to be able to have this kind of control
with a standard library instead of having to render to <canvas> or
something.

If the group accepts my proposal for transform/rotate/scale to be
properties (like perspective and motion-path are), then you'll be able
to transition those three independently, as long as you're using them.
(That is, it won't help you with random translate() functions inside
of transform; it'll let you transition the 'translate' property,
specifically.)

As an update for Zacqary Adam Xeper: CSS Transforms 2 does support three new CSS properties translate, scale and rotate. Specification is an ED at the moment: http://dev.w3.org/csswg/css-transforms-2/

Dirk


~TJ