转换：翻译动画无法在 iOS 15.1 设备上运行

Question

12/4/21更新：我请了一些朋友来测试。它在他们的设备上运行良好。 Android 和 iOS.

所以我尝试了我妻子的 iPad，它奏效了。但这对我女儿的 iPad.

不起作用

深入研究 OS，它在 iOS 14.8.1 上工作，但是更新到 iOS 15.1 的 3 台设备没有工作。

数据： |在职的？ | iOS 15.x | iOS 14.x | Android | |:--------: |:--------:| :------: | :-----: | |是 | 0 | 2 | 2 | |否 | 6 | 0 | 0 |

仍在等待更多测试的到来，但似乎有趋势...

我正在尝试用学校项目中的静态图像制作动画。

在我的桌面上，Chrome 和 Edge 的检查移动模拟器都显示了我想要的动画。

但是在我将它上传到我的 github 之后，我的移动设备 (iOS) 没有遵循我的 transform:translate CSS 代码。

我在 Stack Overflow 中发现了一些建议使用 webkit 的话题，但要么是我添加的代码不正确，要么是其他原因： CSS transform not working on mobile

输出“视频”的动画 gif。

左：iPad。右：桌面检查，iPad 模拟器（均使用 Chrome: 96.0.4664.53 iOs, 96.0.4664.45 桌面。）对于抖动表示歉意，不得不丢弃很多帧才能达到大小限制。

#divNV2 {
  width: 680px;
  height: 300px;
  display: flex;
  grid-area: nv2;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  margin-bottom: 2em;
  border: 2px black solid;
}

#novellasBanner {
  width: 100%;
  -webkit-animation-name: dinoWebkitAttack 8s cubic-bezier(.28, .03, 1, -0.07) infinite;
  animation-name: dinoAttack;
  animation-timing-function: cubic-bezier(.28, .03, 1, -0.07);
  animation-iteration-count: infinite;
  animation-duration: 8s;
}

@-webkit-keyframes dinoWebkitAttack {
  0% {
    width: 100%
  }
  96% {
    width: 3000px;
    left: 0px;
    -webkit-transform: translate(-70%, -50%);
  }
  100% {
    width: 3000px;
    left: 0px;
    -webkit-tranform: translate(-70%, -35%);
  }
}

@keyframes dinoAttack {
  0% {
    width: 100%;
  }
  96% {
    width: 3000px;
    left: 0px;
    transform: translate(-70%, -50%);
    -webkit-transform: translate(-70%, -50%);
    -moz-transform: translate(-70%, -50%);
  }
  100% {
    width: 3000px;
    left: 0px;
    transform: translate(-70%, -35%);
    -webkit-transform: translate(-70%, -35%);
    -moz-transform: translate(-70%, -35%);
  }
}

<div id="divNV2">
  <a href="https://scottsigler.com/library/#post-1154">
    <img id="novellasBanner" alt="Tie-In Novellas" src="https://kurt-eh.github.io/images/RID-EB-680-680x300.jpg">
  </a>
</div>

Answer 1

当您像这样向代码添加前缀时：

-webkit-tranform: translate(-70%, -35%);

确保还包含没有前缀的转换，如下所示：

-webkit-tranform: translate(-70%, -35%);
tranform: translate(-70%, -35%);

Answer 2

我们今天在 class 教程中解决了这个问题。

答案是因为我放大图片的方式。我使用的是宽度，从 100% 增加到 3000%。

我应该在转换方法之前在转换中使用缩放。

为了安全起见，我将保留 -webkit 版本。

*{
background-color:orange;
}
#divNV2 {
  width: 680px;
  height: 300px;
  display: flex;
  grid-area: nv2;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  margin-bottom: 2em;
  border: 2px black solid;
}

#novellasBanner {
  z-index: index 100;;
  width: 100%;
  background: pink;
  transform-origin: center;
  -webkit-transform-origin: center;
  animation-name: dinoAttack;
  animation-timing-function: cubic-bezier(.59,.15,1,-0.15);
  animation-iteration-count: infinite;
  animation-duration: 8s;
}
@keyframes dinoAttack {
  0% {
    left: 0px;
    transform: scale(1.0) translate3D(0, 0, 0);
    -webkit-transform: scale(1.0) translate3D(0, 0, 0);
    -moz-transform: scale(1.0) translate3D(0, 0, 0);
  }
  90% {    
    left: 0px;
    transform: scale(5.0) translate3D(-30%, -4%, 0);
    -webkit-transform: scale(5.0) translate3D(-30%, -4%, 0);
    -moz-transform: scale(5.0) translate3D(-30%, -4%, 0);
  }
  100% {    
    left: 0px;   
    transform: scale(5.0) translate3D(-30%, 25%, 0);
    -webkit-transform: scale(5.0) translate3D(-30%, 25%, 0);
    -moz-transform: scale(5.0) translate3D(-30%, 25%, 0);
  } 
}

<div id="divNV2">
  <a href="https://scottsigler.com/library/#post-1154">
    <img id="novellasBanner" alt="Tie-In Novellas" src="https://kurt-eh.github.io/images/RID-EB-680-680x300.jpg">
  </a>
</div>

转换：翻译动画无法在 iOS 15.1 设备上运行

transform: translate animation not functioning on iOS 15.1 devices

html

css

mobile

transform

css-transforms