The animation works like this: the element in the form of a circle rotates simply along its axis. I can not do the same animation in Mozilla Firefox. Here is the code:

#saw{ animation: saw 0.3s infinite linear; transform-origin: 50% 50%; -moz-animation: saw 0.4s infinite linear; -moz-transform-origin: 74% 52%; -ms-transform-origin: 0% 100%; } @keyframes saw { 0% { transform: rotate(360deg); } } @-moz-keyframes saw { 0% { -moz-transform: rotate(-360deg); } } 
 <div id="saw"></div>

It works the same way in the Mozilla, but still it’s not spinning around.

  • Add markup and other styles you work with. it is not clear what this all applies to .......... and what it means но все равно крутиться не на месте . ? - Alexey Shimansky
  • You have written for chrome twist around the center of transform-origin: 50% 50%; ...... for firefox it is written to twist around the point with the offset -moz-transform-origin: 74% 52%; ....... for opera, so generally with respect to the lower left corner 0% 100%; .......... that is, I suppose it is a matter of inattention and ignorance of css? - Alexey Shimansky
  • There are no styles, #saw is part of the svg picture, I can’t throw off the markup, there is no prefix for the opera, the opera uses styles for chrome, this is the style for IE, just try the animation itself and don’t need to know CSS Simple Circus - Anton
  • Better somehow visually portray what is happening ..... because from the words you voiced it is not clear what exactly the problem is ..... if, as I said, not in those coordinates, then the problem is solved ... if not in this - then no one will ever understand and will not be able to help you - Alexey Shimansky
  • how to edit the code here!) - Anton

0