Circular animation not working on SVG

Question

I have the following animation applied to my simple SVG:

@keyframes rotate  {
    100%  {
        -webkit-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

.keepRotatingOne  {
    -webkit-animation-name: rotate;
    -o-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

Basically i need the outer most ring of my SVG to rotate in a circular motion , by staying in its current place ,whats happening right now is that, the outer ring is not staying in its current place, but rater rotating away. FIDDLE HERE

If i apply the above animation to a to a div element however, it works perfectly fine, SEE HERE.

So why is the animation not working on the SVG ? It would be nice if somebody could explain why its not working and also give me a solution to circumvent this problem.

Answer 1

You can avoid the bug with transform-origin in some versions of Firefox, by reconfiguring your SVG a little. See below.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700,800);
.st0 {
  fill: none;
  stroke: #31A6DE;
  stroke-miterlimit: 10;
}

.st1 {
  fill: #31A6DE;
}

.st2 {
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
}

.st3 {
  font-size: 14px;
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

.keepRotatingOne {
  -webkit-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

<?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve">

    <g transform="translate(549.9, 168)">
      <g class="keepRotatingOne">
        <polygon id="XMLID_1_" class="st0" points="537,301.5 564,301.5 569,275.8 594.7,267.5 613.3,287.1 635.7,271.7 625,247 637,233.7 
 662.7,242.3 674.3,218 653.3,200.3 657.6,184 683.5,179.3 683.5,152 656.1,147.3 652.2,131 672.6,113.3 659.3,90.7 633.3,98.3 
 619,84.3 630,64.3 607,49.7 590,68.3 568.3,62.3 563.7,34.5 537,34.5 531,62.3 506.3,69.5 488.3,49.6 465,64.7 476,89.7 465,102.3 
 438,93.7 426.3,117.7 447,135 443,152 416.3,157 417,184.3 443.7,188.8 448.5,205.8 428.2,222.7 441.7,246.3 467.5,237.8 480,250.7 
 470,274.3 492.3,287.8 510.5,269 532.5,275.5 " transform="translate(-549.9, -168)"/>
      </g>
    </g>
    <ellipse id="XMLID_3_" class="st0" cx="550.5" cy="168.5" rx="91.6" ry="89.5" />
    <text id="XMLID_4_" transform="matrix(1 0 0 1 519.3203 166.4999)">
      <tspan x="0" y="0" class="st1 st2 st3">ProCess</tspan>
      <tspan x="-36.4" y="16.8" class="st1 st2 st3">Standardization</tspan>
    </text>
  </svg>

How it works

We transform the polygon so that its centre sits on the origin (0,0). Then we wrap the polygon in a group element and apply the rotation element to that. That gives us a cog that is rotating around (0,0). Finally, we wrap that group in another group that transforms the cog back to it's original position.

<g transform="translate(<back to original position>)">
  <g class="applyRotationAnimationToThisElement">
    <polygon transform="translate(<to the origin>)" ... />
  </g>
</g>

We need two extra groups here because the object we are rotating can't have it's own transform. That's because it will get replaced by the one in the CSS, and destroy the effect.

Answer 2

It must to spin around its own axis that is placed on 50% top 50% left of itself. Add this to .keepRotatingOne:

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;

jsfiddle

2D transformations can change the x- and y-axis of an element. - w3s

Answer 3

My answer is a couple of years late.I think they fixed that over the course of years

I fixed it with this code

.keepRotatingOne {
  -webkit-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transform-box: fill-box;
  transform-origin: center center;
}