safari/chrome iphone中的动画速度没有变化

Posted 2023-03-14

【中文标题】safari/chrome iphone中的动画速度没有变化

【英文标题】：animation speed not changing in safari/chrome iphone

【发布时间】：2019-05-13 10:39:43

【问题描述】：

我正在使用关键帧动画来旋转圆圈。它在 android 浏览器、chrome 和 Mozilla 中运行良好。但是在 iphone 的 safari/chrome 中单击按钮的动画速度并没有改变。

class App extends React.Component
    state = 
      speedClass : "two"
    ;
    
    render()
        return(
           <div>
               <div className="spinMe " + this.state.speedClass>I am spinning</div>
               <button onClick=this.handleClick>Change speed</button>
           </div>
        );
    
    
    handleClick=()=>
      this.setState( speedClass: this.state.speedClass === "two"?"one":"two" );
    


ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

.spinMe
  width:100px;
  height:100px;
  border-radius:50%;
  border:1px solid red;
  display:flex;
  justify-content:center;
  align-items:center;


.spinMe.one 
    -moz-animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
     animation: spin 1s infinite linear;
  

.spinMe.two 
    -moz-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
     animation: spin 2s infinite linear;
  


@-webkit-keyframes spin 
  from 
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  

  to 
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  


@-moz-keyframes spin 
  from 
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  

  to 
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  


@-o-keyframes spin 
 from 
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  

  to 
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  


@keyframes spin 
 from 
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  

  to 
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

我找不到任何解决方案，请帮我解决这个问题。在 iPhone 中，速度不受影响。可能是什么问题？

【问题讨论】：

使用 Safari 的开发工具更改 animation-duration 也没有效果。我怀疑这是一个 Safari 错误。

仅供参考，CSS 属性的无前缀版本应该总是排在最后。 ***.com/a/36225374/746736

谢谢@Turnip。有什么解决方案可以在 safari 中解决这个问题？

【参考方案1】：

为了解决这个问题，我两次添加了相同的关键帧动画。在点击时，我正在切换动画并且它刚刚工作！