CSS动画rotate3d在Safari中不起作用答案

【问题标题】：CSS Animation rotate3d not working in SafariCSS动画rotate3d在Safari中不起作用
【发布时间】：2019-03-05 09:55:31
【问题描述】：

无论我尝试什么，我都无法让这个动画在 Safari 12 中运行。我已经尝试了供应商前缀和所有方法，但没有任何效果。

它在 Chrome 中运行良好。有人有什么想法吗？

<div class="spinners"></div>

这是css：

@keyframes spinx {
  0% {
    transform: rotate3d(0, 1, 1, 360deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, 360deg);
  }
}
.spinners {
  display: block;
  width: 100%;
  height: 4rem;
  overflow: hidden;
  position: relative;
}
.spinners:before, .spinners:after {
  content: "";
  width: 4rem;
  height: 4rem;
  border: 3px solid red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2rem 0 0 -2rem;
  display: block;
  transform-origin: 50% 50% 0;
}
.spinners:before {
  animation: spinx 2s infinite linear;
}
.spinners:after {
  border-color: blue;
  animation: spinx 4s infinite linear alternate;
}

这是一个演示： https://codepen.io/Skinner927/pen/vVEdag

【问题讨论】：

标签： html css safari css-animations css-transforms

【解决方案1】：

似乎 Safari 和 Firefox 都无法识别两个关键帧之间的变化。要解决这个问题，您可以使用中间关键帧：

50% {
  transform: rotate3d(0, 1, 1, 180deg);
}

演示：

@keyframes spinx {
  0% {
    transform: rotate3d(0, 1, 1, 360deg);
  }
  50% {
    transform: rotate3d(0, 1, 1, 180deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, 0);
  }
}

.spinners {
  display: block;
  width: 100%;
  height: 4rem;
  overflow: hidden;
  position: relative;
}

.spinners:before,
.spinners:after {
  content: "";
  width: 4rem;
  height: 4rem;
  border: 3px solid red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2rem 0 0 -2rem;
  display: block;
  transform-origin: 50% 50% 0;
}

.spinners:before {
  animation: spinx 2s infinite linear;
}

.spinners:after {
  border-color: blue;
  animation: spinx 4s infinite linear alternate;
}

<div class="box">
  <div class="spinners"></div>
</div>

【讨论】：

太棒了！太感谢了。我整天都在用头撞桌子。
谢谢，解决了！