为什么这个 3d css 动画不能在移动设备上运行？

Question

我有这个 3d 旋转文本 css 动画可以在 chrome 桌面上运行，但不能在移动设备上运行。我尝试添加 webkit 前缀，但它无法在 iphone 上运行。有什么明显的原因吗？

https://codepen.io/warpigs666/pen/bGqQbzL

@keyframes turn {
  from { transform: rotate3d(0, 0, 0, 0); }
  to { transform: rotate3d(1, 0, 0, 360deg); }
}

.container {
  width: 2rem;
  height: 2rem;
  perspective: 1000px;
  margin: 100px;
}

.cube {
  position: relative;
  width: 2rem;
  height: 2rem;
  transform-style: preserve-3d;
  animation: turn 3s linear infinite;
}

.face {
  height: 2rem;
  background: white;
  backface-visibility: hidden;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 2rem;
  transition: transform 500ms;
}

.top {
  transform: translateY(-1rem) rotateX(90deg);
}
.front {
  transform: translateZ(1rem);
}
.bottom {
  transform: translateY(1rem) rotateX(-90deg);
}
.back {
  transform: translateZ(-1rem) rotateX(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .cube {
    animation: none;
    transform: rotate3d(1, 1, 0, 45deg);
  }
}

Answer 1

我能够在 iOS 上的移动版 Safari 和 Mac 上的桌面版 Safari 中重现您的错误，因此该错误似乎至少与一般的 Safari 相关，不一定特定于移动设备。 Safari 显然不喜欢只有 2 个关键帧的 rotate3d 变换动画。

修复归结为向 @keyframes CSS 添加一个中间关键帧（参见 50%）：

@keyframes turn {
  0% {
    transform: rotate3d(1, 0, 0, 0deg);
  }

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

  100% {
    transform: rotate3d(1, 0, 0, 360deg);
  }
}

这是一个更新的 Codepen，其中包含正在执行的修复程序：

https://codepen.io/maqam7/pen/OJpaypZ

请注意，我在调试时删除了大部分前缀规则，还因为它们在较新版本的 Safari 中是不必要的（显然 -webkit-backface-visibility 除外）。如果您想将它们添加回去，由您决定。请注意，我还删除了 .face class 上的过渡样式，因为它们什么也没做。

我无法访问 android phone，所以我无法验证它在那里是否有效。但是，我可以验证上述修复在最新的（截至撰写本文时）桌面 Chrome (Mac)、桌面 Firefox (Mac)、桌面 Safari (Mac ) 以及 iOS.

上的 Mobile Safari

一旦我意识到问题出在 Safari 上就提供解决方案的这个 Stack Overflow 答案的支持：

为什么这个 3d css 动画不能在移动设备上运行？

Why won't this 3d css animation work on mobile?

css

transform

css-animations