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

Question

我已经被这个问题困扰了 3 天，并且已经在 Internet 上搜索了解决方案，但还没有找到有效的解决方案。

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

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

我无法在此处添加视频，但这里有一些链接，说明视频应该如何显示和不应该如何显示：

外观应该如何：
https://twitter.com/planet_katie/status/1415739110505996291

它如何在所有 iOS 浏览器和桌面 Safari 上出现故障：
https://twitter.com/planet_katie/status/1418312787906998275

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

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

我尝试过的事情：

将我的 svg 图像更改为 png，因为我读到有时 svg 的行为出乎意料
添加了所有正确的 -webkit- 前缀
将4个动画压缩为1个
在我的元素上添加我的 CSS 动画时使用普通格式（动画名称、动画持续时间、动画迭代计数等）而不是 shorthand 格式
包括每个动画的 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);
  }
}

尝试一下，看看是否能解决问题！[=12=]

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 在尝试一次运行多个关键帧动画时遇到问题。

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

CSS Animation Behaving Differently on Safari / All iPhone Browsers

css

ios

safari

cross-browser

css-animations