我已经卡在这个问题上三天了,搜遍了互联网也没找到可行的解决方案。
我有一个卡通火箭飞越屏幕的动画。火箭有四个链接关键帧动画:
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本身上运行。
我尝试过的事情:
我有一个卡通火箭飞越屏幕的动画。火箭有四个链接关键帧动画:
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秒(从某个地方读到这可以帮助其他人)
#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" />