CSS Transition for only one type of transform?

css transform transition
cimak picture cimak · Jun 9, 2014 · Viewed 50.7k times · Source

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

Barun picture Barun · Jun 9, 2014

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);
}

Related questions

Bug with transform: scale and overflow: hidden in Chrome

Working with CSS3 property transform: scale, I found interesting issue. I wanted to make a little zoom effect for pictures. But when I used for the parent div overflow: hidden and border-radius, the child div extended the beyond of parent …

Read More
How to get value of translateX and translateY?

I want to get translateY value from the in-line css with the JavaScript. Here is the in-line value: style ="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, -13361.5px) scale(1) translateZ(0px);" These code give to me the total …

Read More
Zooming on a point with CSS3 transform scale

Even if the following code snippet seems short, I struggled during days (shame on me!) to find a way to zoom on the point that is clicked using only CSS3 transform. It works now: The only problem is that the …

Read More