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

Question

我在 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/

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