Geek Answers Handbook

Direction of rotation in CSS animation \ Transformation

Confidence regarding CSS animations \ transform. I am trying to understand CSS animation and run the following problem:

A simple div with animations attached to it in CSS as shown below

<div id="learn">LEARN</div> #learn { width : 100px; height : 100px; background : blue; position : relative; animation: test1 5s ease-in 2s infinite; }

Case 1:

  @keyframes test1 { 0% { transform: rotate(179deg); } 100% { transform: rotate(357deg); } }

Case 2 (0% conversion is divided into 90 + 89 degrees instead of 179):

 @keyframes test1 { 0% { transform: rotate(90deg) rotate(89deg); } 100% { transform: rotate(357deg); } }

Why does the first case rotate clockwise and the second rotates counterclockwise?

+6
source share
1 answer

It may just be a bug with rotation transformations, which I will consider after some background.

Background

First, the way rotations should work is related to the circle. If you specify a few degrees, this will place the element in a position dictated by how many degrees the degrees specify. If not rotation animation, there are many ways to represent the placement of an element. The Uniquely code is half correct in its comment that the placement of 357 degrees and -3 degrees is the same, but they are very different when animated. A transition from 0 degrees to -3 degrees is a small counterclockwise rotation, while a transition from 0 degrees to 357 degrees is a large clockwise rotation.

conclusions

What you found seems to ignore this calculation (both in Firefox and Chrome from what I tested). From what I see, the union of rotate transforms effectively changes the direction of rotation, even if you combine with 0deg rotation:

 transform: rotate(90deg); //rotates clockwise transform: rotate(0deg) rotate(90deg); //rotates counter-clockwise

It seems that you can fix this by "combining" rotation transformations into both stages of the animation:

 // this performs a clockwise rotation @keyframes test3 { 0% { transform: rotate(0deg) rotate(90deg); } 100% { transform: rotate(0deg) rotate(357deg); } }

Finally, it seems that the number of “combinations” matters. If you combine 2 turns in one step, but 3 in another, unexpected behavior will occur:

 // rotates counter-clockwise since there are unequal rotation transforms @keyframes test4 { 0% { transform: rotate(0deg) rotate(0deg) rotate(90deg); } 100% { transform: rotate(0deg) rotate(357deg); } }

Conclusion

This is probably not the best answer, but the combination of such turns is simply not documented anywhere. I would suggest not combining the same rotate transforms (you can still combine rotateX and rotateY without this oddity) and stick to the sum of the degree values.

In the event that anyone finds this explanation, they may find out more about this behavior than I do, here is a fiddle with the above examples as a starting point.

+2
source

More articles:


All Articles