Rotating animation doesn't work with chrome-CodePudding

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...

CodePudding user response：

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  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

CodePudding user response：

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  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>