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

Question

我已经卡在这个问题上三天了，搜遍了互联网也没找到可行的解决方案。

我有一个卡通火箭飞越屏幕的动画。火箭有四个链接关键帧动画：

1）“发射”将火箭从屏幕左侧移动到右侧
2）“右自转”旋转火箭使其指向上方
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动画时使用长格式（animation-name，animation-duration，animation-iteration-count等）而不是简写格式
• 包括每个动画的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" />

- Katie Reynolds

Answer 1

我最终采用的方法是将四种动画合并为一种，如下所示：

@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在同时运行多个关键帧动画时遇到了问题。

- Katie Reynolds

Answer 2

我认为你不需要使用-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);
  }
}

尝试一下，看看是否能解决问题！

- Andrew Hedges

---

感谢您帮助整理代码并点赞，但不幸的是问题仍然存在！ - Katie Reynolds

@KatieReynolds，我的建议是明确地写出所有单独的属性，而不是使用速记方式，这样你就知道自己正在改变哪些值。这里有一个例子：https://css-tricks.com/snippets/css/keyframe-animation-syntax/#calling-keyframe-animation-with-separate-properties - Andrew Hedges

你知道我如何连续处理多个动画吗？我开始尝试了一下，但不确定如何处理多个动画。我认为我只需要按顺序放置它们，但是我知道当在同一元素上有重复的CSS属性（例如两个animation-name属性）时，它会忽略第一个并使用第二个！ - Katie Reynolds