CSS Transition for only one type of transform?

Question

Is it possible to animate (using transitions) only one type of css transform?

I have css:

cell{   transform: scale(2) translate(100px, 200px);   transition: All 0.25s;   } 

Now, I want only scale to be animated. In this case I could use position:absolute and left/right properties but I far as I remember, translate() is much better in performance. I would also like to avoid using additional html elements.

Fiddle: http://jsfiddle.net/6UE28/2/

Answer 1

No! you cannot use transition only for certain value of transform like scale(2).

One possible solution would be as follows: (sorry, you have to use additional html)

HTML

<div class="scale"> <div class="translate"> Hello World </div> </div> 

CSS

div.scale:hover {     transform: scale(2);     transition: transform 0.25s; } div.scale:hover div.translate {     transform: translate(100px,200px); }