Question

在一页中，我有一个带有自定义动画的按钮，该按钮依赖于以下过程：

单击按钮，javascript将阻止用户被发送到新页面，将类名“ animate”添加到按钮，并使页面等待2秒钟；
CSS选择器“动画”将调用称为“ bottomBubbles”或“ topBubbles”的关键帧动画；
topBubbles或bottomBubbles排序背景位置和背景大小规则，以模拟2秒钟的“图形爆炸”；然后最后
javascript然后停止等待并触发重定向到应将用户发送到的链接。

从以上所述，除＃3之外，所有步骤均适用于Safari。

@-webkit-keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}

https://jsfiddle.net/wLvb9n0f/

我对此进行了研究，到目前为止，我发现的唯一发现是，对于Safari来说，必须使用全部百分比，而我已经在这样做了。如何使该动画在Safari中工作？

使用关键帧的自定义动画在Safari中不起作用

0 个答案: