CSS3 transition scale but not translation

Question

I couldn't find an answer to this anywhere, probably because it doesn't exist, but anyway:

Rather than defining "transition-property: transform", is it possible to define transitions for translation and scale independently?

Right now I got the following definition:

.logo {
    position: absolute;
    -webkit-transition: -webkit-transform 1s ease-out;
}

This way, when I set "-webkit-transform" to "scale($s) translate3D($x,$y,$z)" (with $s etc. being arbitrary values) both are animated, but I only want the scale to be...

Thanks for any hints in advance!

scale and translate are the value of the same css properties I don't think its posible to seperate them. — Yoann
– Yoann, Commented Mar 23, 2012 at 17:00

Michael Mullany · Accepted Answer · 2012-03-23 20:09:21Z

11

The hacky way to solve this is to use a wrapper element and put the translate on that element.

answered Mar 23, 2012 at 20:09

Michael Mullany

32.1k6 gold badges84 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bunkerbewohner Over a year ago

Thanks! I honestly didn't think of that possibility. :'-)

Collectives™ on Stack Overflow

CSS3 transition scale but not translation

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related