CSS3 transition scale, but not translation

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

Instead of defining transition-property: transform, can you define transitions for translation and scaling independently?

Currently I got the following definition:

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

      

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

Thanks for any tips in advance!

+3


source to share


1 answer


A hacky way to solve this is to use a wrapper element and put a translation on that element.



+5


source







All Articles