Question

我正在使用CSS动画，其中火箭在晃动。一切似乎都运行良好，但是由于某些原因，从Safari浏览该网站的用户有时看不到动画（重要提示：它并不总是-刷新时会重新开始工作）。除Safari外，所有其他浏览器似乎都可以正常工作。我的代码中有什么与Safari浏览器不兼容的内容吗？

我一直在搜索caniuse.com，以查看是否已使用某些CSS与Safari浏览器不兼容。但是，我似乎没有发现问题。

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
    }

.rocket-img {
    max-width: 180px;
}

.shake img {
 -webkit-animation-name: spaceboots;
 -webkit-animation-duration: 0.8s;
 -webkit-transform-origin: 50% 50%;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
}
@-webkit-keyframes spaceboots {
 0% {
 -webkit-transform: translate(2px, 1px) rotate(0deg);
}
 10% {
 -webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
 20% {
 -webkit-transform: translate(-3px, 0px) rotate(1deg);
}
 30% {
 -webkit-transform: translate(0px, 2px) rotate(0deg);
}
 40% {
 -webkit-transform: translate(1px, -1px) rotate(1deg);
}
 50% {
 -webkit-transform: translate(-1px, 2px) rotate(-1deg);
}
 60% {
 -webkit-transform: translate(-3px, 1px) rotate(0deg);
}
 70% {
 -webkit-transform: translate(2px, 1px) rotate(-1deg);
}
 80% {
 -webkit-transform: translate(-1px, -1px) rotate(1deg);
}
 90% {
 -webkit-transform: translate(2px, 2px) rotate(0deg);
}
 100% {
 -webkit-transform: translate(1px, -2px) rotate(-1deg);
}
}

<div class="shake rocket-img">
<img src="https://turbotobias.dk/wp-content/uploads/2019/04/Turno-Tobias-Raketfart.svg" alt="the_rocket-2" title="the_rocket-2" spai-updated="180">
</div>

Safari浏览器中的CSS动画问题

0 个答案: