时间戳

首页 > 解决方案 > CSS 动画在 Safari / 所有 iPhone 浏览器上表现不同

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

问题描述

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

我有一个卡通火箭飞过屏幕的动画。火箭应用了 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 本身。

我尝试过的事情：

到目前为止，没有运气。任何人都可以查看我的代码，看看我是否遗漏了什么？注意：为简洁起见，我删除了 -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" />

标签： cssiossafaricross-browsercss-animations

解决方案

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

试试看它是否能解决它！

推荐阅读