CSS 动画在 Safari / 所有 iPhone 浏览器上表现不同

Question

我被这个问题困扰了 3 天，并在互联网上搜寻了解决方案，但还没有找到一个可行的解决方案。

我有一个卡通火箭飞过屏幕的动画。火箭应用了 4 个链式关键帧动画：

1.) “发射”将火箭从屏幕左侧移到右侧
2.）“rightself”旋转火箭，使其指向上方
3.）“下降”将火箭向下移动到行星
4.）“缩小”使火箭在接近行星表面时变小

我无法在此处添加视频，但以下是视频应该和不应该如何显示的链接：

应该是什么样子：
https://twitter.com/planet_katie/status/1415739110505996291

它在所有 iOS 浏览器和桌面 Safari 上的故障原因：
https://twitter.com/planet_katie/status/1418312787906998275

游戏链接，如果你想自己试试：
http://www.codeeverydamnday.com/projects/rocketblaster/index.html

火箭动画在桌面 Chrome 和 Firefox 上运行流畅，但在 Safari 中出现故障。它也可以在 Android 手机上流畅运行，但在我在 iPhone 上尝试过的每个浏览器上都会出现故障。 Chrome 的开发工具中的 iPhone 模拟器也显示它运行顺利，所以我不确定为什么它不能转换为 iPhone 本身。

我尝试过的事情：

• 将我的 svg 图像更改为 png，因为我读到有时 svg 的行为会出乎意料
• 添加了所有正确的 -webkit- 前缀
• 将4个动画压缩成1个
• 在我的元素（动画名称、动画持续时间、动画迭代计数等）上添加 CSS 动画时使用简写格式，而不是简写格式
• 包括每个动画的 0% 和 100% 关键帧
• 为第一个动画添加 0.01 秒的延迟（在某处读到这对其他人有帮助）

到目前为止，还没有运气。任何人都可以查看我的代码，看看我是否遗漏了什么？注意：为简洁起见，我删除了 -moz-、-ms- 和 -o- 前缀，但它们也在我的代码中。

#rocketfire {
  background-color: red;
  position: absolute;
  top: 100px;
  left: -320px;
  height: 200px;
  -webkit-animation: launch 4s ease-in-out 0.01s 1 forwards,
    rightself 2s ease-in-out 3.5s 1 forwards,
    shrink 3.5s ease-in-out 4s 1 forwards, descend 4s ease-in-out 5s 1 forwards;
  animation: launch 4s ease-in-out 1 forwards,
    rightself 2s ease-in-out 3.5s 1 forwards,
    shrink 3.5s ease-in-out 4s 1 forwards, descend 4s ease-in-out 5s 1 forwards;
}

@-webkit-keyframes launch {
  0% {
    -webkit-transform: translateX(-0px);
  }
  100% {
    -webkit-transform: translateX(1050px);
  }
}

@keyframes launch {
  0% {
    transform: translateX(-320px);
  }
  100% {
    transform: translateX(1050px);
  }
}

@-webkit-keyframes rightself {
  0% {
    -webkit-transform: translateX(1050px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateX(1050px) rotate(-82deg);
  }
}

@keyframes rightself {
  100% {
    transform: translateX(1050px) rotate(-82deg);
  }
}

@-webkit-keyframes descend {
  0% {
    -webkit-top: 0px;
  }
  100% {
    -webkit-top: 270px;
  }
}

@keyframes descend {
  100% {
    top: 270px;
  }
}

@-webkit-keyframes shrink {
  0% {
    -webkit-transform: translateX(1050px) rotate(-82deg) scale(1);
  }
  100% {
    -webkit-transform: translateX(1050px) rotate(-82deg) scale(0.5);
  }
}

@keyframes shrink {
  100% {
    transform: translateX(1050px) rotate(-82deg) scale(0.5);
  }
}

<img id="rocketfire" src="images/rocketfireright.png" />

Answer 1

我认为您不应该需要 -webkit 版本的动画，因此删除这些将使 CSS 更易于调试。我发现了一些不一致和缺失值。清理后，CSS 如下所示：

#rocketfire {
  background-color: red;
  position: absolute;
  top: 100px;
  left: -320px;
  height: 200px;
  animation: launch 4s ease-in-out 1 forwards,
             rightself 2s ease-in-out 3.5s 1 forwards,
             shrink 3.5s ease-in-out 4s 1 forwards,
             descend 4s ease-in-out 5s 1 forwards;
}

@keyframes launch {
  0% {
    transform: translateX(-320px);
  }
  100% {
    transform: translateX(1050px);
  }
}

@keyframes rightself {
  0% {
    transform: translateX(1050px) rotate(0deg);
  }
  100% {
    transform: translateX(1050px) rotate(-82deg);
  }
}

@keyframes descend {
  0% {
    top: 0px;
  }
  100% {
    top: 270px;
  }
}

@keyframes shrink {
  0% {
    transform: translateX(1050px) rotate(-82deg) scale(1);
  }
  100% {
    transform: translateX(1050px) rotate(-82deg) scale(0.5);
  }
}

试试看能不能解决问题！

Answer 2

最终对我有用的是将四个动画合二为一，如下所示：

@keyframes launch {
  30% {transform: translateX(1050px) rotate(0);}
  50% {transform: translateX(1050px) scale(1) rotate(-82deg); top: 100px;}
  80% {transform: translateX(1050px) scale(0.5) rotate(-82deg);}
  100% {transform: translateX(1050px) scale(0.5) rotate(-82deg); top: 270px;}
}

似乎 Safari 在尝试同时运行多个关键帧动画时遇到了问题。