CSS动画在电脑上工作，但不能在我的手机上

Question

所以我找到了这个动画，我正在尝试它，它在我的电脑上完美地工作，但是一旦我切换到我的手机动画只是冻结在一帧。我不明白它为什么会这样……顺便说一下，我正在使用React，我不认为这很重要，但我们永远不会知道。

CSS:

.loader {
  max-width: 15rem;
  width: 100%;
  height: auto;
  stroke-linecap: round;
}
circle {
  fill: none;
  stroke-width: 3.5;
  animation-name: preloader;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: 170px 170px;
  will-change: transform;
}
circle:nth-of-type(1) {
  stroke-dasharray: 550px;
}
circle:nth-of-type(2) {
  stroke-dasharray: 500px;
}
circle:nth-of-type(3) {
  stroke-dasharray: 450px;
}
circle:nth-of-type(4) {
  stroke-dasharray: 300px;
}
circle:nth-of-type(1) {
  animation-delay: -0.15s;
}
circle:nth-of-type(2) {
  animation-delay: -0.3s;
}
circle:nth-of-type(3) {
  animation-delay: -0.45s;
}
circle:nth-of-type(4) {
  animation-delay: -0.6s;
}
@keyframes preloader {
  50% {
    transform: rotate(360deg);
 }
}

HTML:

import React from 'react'
function Animation() {
  return (
<div>
<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
     <circle cx="170" cy="170" r="160" stroke="#0000FF"/>
     <circle cx="170" cy="170" r="135" stroke="#404041"/>
     <circle cx="170" cy="170" r="110" stroke="#0000FF"/>
     <circle cx="170" cy="170" r="85" stroke="#404041"/>
  </svg>
</div>
  )
}
export default Animation

编辑:所以在我哥哥的手机上尝试后，它工作了，我不知道为什么它在我的手机上这样做，但在其他人身上工作…

Answer 1

我认为这是因为你使用class而不是className。在React. js中，我们使用className，它使用className而不是class的唯一原因是类在JavaScript中是一个保留关键字，因为我们在React中使用JSX，它本身就是JavaScript的扩展，所以我们必须使用className而不是class属性。

import React from 'react';
function Animation() {
  return (
<div>
<svg className="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
     <circle cx="170" cy="170" r="160" stroke="#0000FF"/>
     <circle cx="170" cy="170" r="135" stroke="#404041"/>
     <circle cx="170" cy="170" r="110" stroke="#0000FF"/>
     <circle cx="170" cy="170" r="85" stroke="#404041"/>
  </svg>
</div>
  )
}
export default Animation