旋转动画不适用于 chrome答案

【问题标题】：Rotating animation doesn't work with chrome旋转动画不适用于 chrome
【发布时间】：2023-01-28 18:07:30
【问题描述】：

我制作的动画适用于 Firefox，但不适用于 Chrome。我已经尝试了十几种解决方案，但我似乎无法让它发挥作用。

这是我的代码：

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

有人可以帮我吗？我究竟做错了什么？

-- 编辑：我发现我实际上可以旋转，但我必须输入一个小于 360 度的值才能使其工作。我不知道为什么我不能像 Firefox 那样将它旋转 1080 度...

【问题讨论】：

请提供足够的代码，以便其他人可以更好地理解或重现问题。
@Community 我刚刚做了！ :)
@Dwenya 我已经更新了我的答案，这似乎解决了这个问题。

标签： css css-animations webkit-animation

【解决方案1】：

更新

在您使用 SVG 更新您的答案后，我稍微修改了您的 CSS 以指向外部 id (#svg)，而不是 #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

我不确定您的标记是什么样的，但似乎一切正常。需要注意的是，您不再需要为正在使用的属性添加 -webkit- 前缀，因为这些属性已被所有现代浏览器完全采用多年。

#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);
  }
}

&lt;div id="path"&gt;&lt;/div&gt;

jsFiddle

【讨论】：

你好！谢谢，很高兴知道 :) 我将 svg 添加到我的代码中，以防万一这可能是错误的但我不明白，图像确实显示在 Chrome 上，它只是没有转动......

【解决方案2】：

删除路径的 transform 属性似乎可以解决此问题

transform="scale(1,1) translate(0,0)"
实际上并没有改变任何东西。

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>

【讨论】：

【解决方案3】：

我发现问题的发生是因为浏览器不知何故不知道你开始旋转过渡的程度。所以只需将起始旋转度数定义为 0 即可告诉浏览器。如果这样做，浏览器在给定负值时也能正常运行。

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

希望能帮助到你

【讨论】：