360 CSS上的CSS动画旋转在Chrome中无效

Question

已经过了几个小时了，我一直在努力让这个动画在Chrome上运行。我把范围缩小到以下几个方面：transform: rotate(1080deg);在火狐中工作得很好，但在Chrome中却不工作(它只是不旋转)。我发现只有在不到360度的时候，它才能在Chrome中旋转。但问题是，我确实需要像火狐一样旋转三次。

这是我的密码

​

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

​

有什么想法吗?/

Answer 1

你想要做到这一点吗？

​

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

​