如何让 Safari 中的 @keyframes 动画像在 Chrome/FF 中一样工作？答案

【问题标题】：How to get @keyframes animation in Safari to work like in Chrome/FF?如何让 Safari 中的 @keyframes 动画像在 Chrome/FF 中一样工作？
【发布时间】：2021-06-02 22:36:30
【问题描述】：

我在 Safari 中遇到了 @keyframes 问题。我认为问题是速记或将多个动画组合成一个动画属性：-webkit-animation-name: anim1, anim2, anim3。没关系。我环顾四周，我认为使用错误的百分比是问题所在，就像它需要一个中间点，50%，才能让 rotate3d 工作。

当我只有 0% 和 100% 时，rotate3d 允许 DIV 在 Chrome/FF 中一直旋转。在 Safari 中，没有任何动作。因此，我添加了 50%，它现在移动了，但它并没有一直旋转。如果不添加更多百分比，不确定该怎么做。我错过了什么？

<div>
    <p>hello</p>
</div>


div {
  background-color: blue;
  height: 10em;
  width: 10em;

  /* -webkit-animation: 3s spin infinite;
   animation: 3s spin infinite;
   */

  -webkit-animation-name: spin;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate3d(1, 2, 1, 0deg);
  }
  /*   Works somewhat if I add 50% {..},  
  but it doesn't go all the way around like in Chrome and FF */
/*   50% {
    -webkit-transform: rotate3d(1, 2, 1, 180deg);
  } */
  100% {
    -webkit-transform: rotate3d(1, 2, 1, 360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate3d(1, 2, 1, 0deg);
  }
/*   50% {
    transform: rotate3d(1, 2, 1, 180deg);
  } */
  100% {
    transform: rotate3d(1, 2, 1, 360deg);
  }
}

https://jsfiddle.net/j9payfkg/1/

【问题讨论】：

标签： css animation

【解决方案1】：

你很亲密。我去掉了其他代码只是为了方便查看代码。

简而言之，您没有给出完整的百分比值，因为旋转不会在 360 处结束，而是在 0 处结束。所以您需要 4 个关键帧。

请记住，这是针对 Safari 的，我没有在此代码中添加 FF 和 Chrome。所以请在 Safari 中查看。

0deg > 2个中间人并返回> 0deg

div {
  background-color: blue;
  height: 10em;
  width: 10em;
  
 -webkit-animation-name: spin;
 -webkit-animation-duration: 3s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;

}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate3d(1, 2, 1, 0deg);
  }
    25% {
    -webkit-transform: rotate3d(1, 2, 1, 90deg);
  }
    50% {
    -webkit-transform: rotate3d(1, 2, 1, 180deg);
  }
  100% {
    -webkit-transform: rotate3d(1, 2, 1, 0deg);

}

  <div>
    <p>hello</p>
  </div>

【讨论】：