时间戳

首页 > 解决方案 > 为什么这个 3d css 动画不能在移动设备上运行？

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

问题描述

我有这个 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);
  }
}

标签： csscss-animationstransform

解决方案

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

修复归结为向@keyframesCSS 添加一个中间关键帧（请参阅 参考资料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类上的过渡样式，因为它们没有做任何事情。

我无法使用安卓手机，所以我无法验证它在那里工作。但是，我可以验证上述修复程序在最新的（撰写本文时）桌面 Chrome (Mac)、桌面 Firefox (Mac)、桌面 Safari (Mac) 以及 iOS 上的 Mobile Safari 中有效。

一旦我意识到问题通常出在 Safari 上，这个 Stack Overflow 答案的道具就提供了解决方案：

CSS动画rotate3d在Safari中不起作用

推荐阅读