CODEWITHSUNDEEP
csscss-transitions
Bunkerbewohner
Bunkerbewohner

Reputation: 632

CSS3 transition scale but not translation

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!

Upvotes: 4

Views: 3962

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31705

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

Upvotes: 11

Related Questions