5

Can i use transform as a value of transition-property?

transition-property: transform;

W3C transition standard doesn't list transform as Animatable value.

In fact W3C transform standard has missing row for Animatable:Yes/No in the table of 7. The ‘transform’ Property.

I am worried this is legal or not.

This stackoverflow answer suggest to use transform as the value of transition-property.

I can get the transform animation using 0% and 100% keyframe but if only 2 states are involved, I would prefer transition instead of animation.

Community
  • 1
  • 1
P K
  • 9,972
  • 12
  • 53
  • 99

3 Answers3

2

You must specify the exact name for each engine. So for example, for Safari and Chrome, you should write the following:

-webkit-transition-property: -webkit-transform;

Here is the working example in JSFiddle.
Note: I've used the shorthand for transform property.

Karlen Kishmiryan
  • 7,322
  • 5
  • 35
  • 45
0

It seems as though you can, however I'm not too sure about cross-browser compatibility. You can play around with it here. Using the code already provided, when you hover over the red box, it moves.

  • @PK I know, but the page is coded so that you can edit the code, change it to the transition-property on the left to transform, and it will update on the right side. –  Jul 02 '13 at 22:36
-1
selector{
transform: translateX(-100px);
transition:transform 0.4s ease-in-out;
}

So from the above example, we see that we can use the "transform" property itself as the value of "transition" property.

As a result, our translate will happen smoothly instead of the immediate shift of 100px to the left, the shift will be animated.

Subhasish Nath
  • 124
  • 1
  • 14