Menu
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/
980
So, what's the difference between CSS Transform and CSS Transition? The Transform property in CSS moves or modifies the appearance of an element, whereas the Transition property seamlessly and gently transitions the element from one state to another.
You can transition two (or more) CSS properties by separating them with a comma in your transition or transition-property property. You can do the same with duration, timing-functions and delays as well. If the values are the same, you only need to specify one of them.
Specify the Speed Curve of the Transition The transition-timing-function property can have the following values: ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end.
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
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)
<div class="scale"> <div class="translate"> Hello World </div> </div> div.scale:hover { transform: scale(2); transition: transform 0.25s; } div.scale:hover div.translate { transform: translate(100px,200px); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
