-2

It's been a few hours and I've been trying to make this animation work in Chrome. I've narrowed it down to this: transform: rotate(1080deg); works perfectly in Firefox but not in Chrome (it just doesn't rotate). I found out it rotates in Chrome only if I put less than 360 degrees. But the thing is, I do need to rotate it three times like it does in Firefox.

Here's my code

#path {
  animation-name: turn;
  transform-origin: 50px 50px;
  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" transform="scale(1,1) translate(0,0)">
    </path>
</svg>

Any ideas? :/

Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
Dwenya
  • 17
  • 2

1 Answers1

-1

Are you trying to achieve this?

.logo{
  animation: rotate 5s linear 0s infinite;
  -webkit-animation: rotate 1s linear 0s infinite;
  }
  @keyframes rotate
  {
  0%   {}
  100% {transform: rotate(-360deg);}
  }
  @-webkit-keyframes rotate
  {
  0%   {}
  100% {-webkit-transform: rotate(-360deg);}
  }
  <svg viewbox="0 0 100 100" id="svg" class="logo">
    <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>
debugger
  • 1,442
  • 1
  • 9
  • 14