transform：翻译动画在 iOS 15.1 设备上不起作用

Posted 2023-03-05

【中文标题】transform：翻译动画在 iOS 15.1 设备上不起作用

【英文标题】：transform: translate animation not functioning on iOS 15.1 devices

【发布时间】：2022-01-10 07:45:49

【问题描述】：

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

所以我尝试了我妻子的 iPad，它成功了。但它在我女儿的 iPad 上不起作用。

深入操作系统，它在 iOS 14.8.1 上运行，但更新到 iOS 15.1 的 3 台设备都无法运行。

数据： |在职的？ | iOS 15.x | iOS 14.x |安卓 | |:-------: |:--------:| :--------: | :-----: | |是 | 0 | 2 | 2 | |没有 | 6 | 0 | 0 |

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

---

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

在我的桌面上，Chrome 和 Edge 的检查移动模拟器都按照我的预期显示动画。

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

我在 Stack Overflow 中发现了一些建议使用 webkit 的线程，但要么我错误地添加了我的代码，要么发生了其他事情： https://***.com/questions/54104578/possible-to-convert-htmlcss-animationpng-extension-image-to-gif-extension-im 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"  src="https://kurt-eh.github.io/images/RID-EB-680-680x300.jpg">
  </a>
</div>

【参考方案1】：

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

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

确保还包括不带前缀的转换：

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

【讨论】：

我是否还需要声明一个 webkit 关键帧，如果需要，@-webkit-keyframes 和 @keyframes 是否在 -webkit-animation: 和动画中获得相同的名称： 上面的声明？顺序重要吗？

不，你不需要@-webkit-keyframes。

另请参阅此网站：caniuse.com/transforms2d 以检查您需要哪些前缀。顺序应该无关紧要。

还可以尝试在您的移动设备上使用不同的网络浏览器。众所周知，Google Chrome 的兼容性非常好。

Chrome 是我在移动设备上的默认设置。它也无法在 Safari 中运行。

【参考方案2】：

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

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

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

我将保留在 -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"  src="https://kurt-eh.github.io/images/RID-EB-680-680x300.jpg">
  </a>
</div>