Rotating animation doesn't work with chrome

Question

I make an animation that works on Firefox but not on Chrome. I've tried a dozen of solutions but I can't seem to make it work.

Here's my code:

#path {
    animation-name: turn;
    transform-origin: 50px 50px;

    -webkit-animation: turn;
    -webkit-transform-origin: 50px 50px;

    -webkit-animation: turn 2s infinite;
    animation: turn 2s infinite;
}


@-webkit-keyframes turn {
    100% {
        -webkit-transform: rotate(1080deg);
    }
}
@keyframes turn {
    100% {
        transform:rotate(1080deg);
    }
}

<svg viewbox="0 0 100 100" id="svg">
                    <defs>
                        <linearGradient id="gradient">
                            <stop offset="26%" stop-color="#632ef4"/>
                            <stop offset="100%" stop-color="#12ead5"/>
                        </linearGradient>
                    </defs>

                    <path id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80" transform="scale(1,1) translate(0,0)">
                    </path>
                </svg>

Could someone help me? What am I doing wrong?

-- Edit : I found I actually CAN rotate, but I have to enter a value that's less than 360 degrees to make it work. I don't know why I can't turn it 1080 degrees like I can Firefox...

Answer 1

Update

After you've updated your answer with the SVG, I slightly modified your CSS to point to the outer id (#svg), and not the #path id.

#svg {
  animation-name: turn;
  transform-origin: 50px 50px;
  animation: turn 2s infinite;
  width: 100px;
  height: 100px;
}

@keyframes turn {
  100% {
    transform: rotate(1080deg);
  }
}

<svg viewbox="0 0 100 100" id="svg">
  <defs>
    <linearGradient id="gradient">
      <stop offset="26%" stop-color="#632ef4" />
      <stop offset="100%" stop-color="#12ead5" />a
    </linearGradient>
  </defs>
  <path class="rotate" id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">
  </path>
</svg>

jsFiddle

---

I'm not sure what your markup looks like, but things seem to be working fine. One note is that you no longer need the -webkit- prefix for the properties you're using, as these properties have been fully adopted by all modern browsers for many years.

#path {
  animation-name: turn;
  transform-origin: 50px 50px;
  animation: turn 2s infinite;
  width: 100px;
  height: 100px;
  background-color: red;
}

@keyframes turn {
  100% {
    transform: rotate(1080deg);
  }
}

<div id="path"></div>

jsFiddle

Answer 2

Removing the path's transform attribute seems to fix this issue

transform="scale(1,1) translate(0,0)"
actually doesn't transformanything.

svg{
  display:inline-block;
  height:10em;

}

.rotate{
     animation-name: turn;
    transform-origin: center;
    animation: turn 2s infinite;
}



@keyframes turn {
    100% {
        transform:rotate(1080deg);
    }
}

<svg viewbox="0 0 100 100" id="svg">
  <defs>
    <linearGradient id="gradient">
      <stop offset="26%" stop-color="#632ef4" />
      <stop offset="100%" stop-color="#12ead5" />
    </linearGradient>
  </defs>
  <path class="rotate" id="path" stroke-linecap="round" stroke-width="15" stroke="url(#gradient)" fill="none" stroke-dasharray="200, 250.2" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80" >
  </path>
</svg>

Answer 3

I found out that the problem occurs because somehow the browser doesn't know at what degree you are starting your rotation transition. so just tell the browser by defining the starting rotation degree as 0. if you do this the browser will also function correctly when given negative values.

@keyframes turn {
0% { 
    transform: rotate(0)
}
100% {
    transform:rotate(1080deg);
}
}

Hope it helps