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＆gt; 2个中介并返回＆gt; 0deg

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: