CSS3 -webkit 关键帧动画在 windows 的 safari 中不起作用

Question

我的加载动画需要你的帮助。我使用了 CSS3 关键帧动画，它在主要浏览器 Mac/PC 上工作正常，除了 Windows Safari。

我不知道我的代码有什么问题。请帮助我

提前致谢。

编辑：这是 link - https://jsfiddle.net/HemZone/0ottLdds/

.hemSpinner {
 width: 50px;
 height: 50px;
 border-radius: 100%;
 margin: auto;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 color: #fcac45;
}
.hemLoader .hemSpinner:after, .hemLoader .hemSpinner:before {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 border-radius: 100%;
 box-shadow: 0 0 0 2px;
 -webkit-animation: loaderHEM linear 0s infinite;
 animation: loaderHEM 1.3s linear 0s infinite;
 margin: auto;
 width: 10px;
 height: 10px;
 opacity: 0;
}
.hemLoader .hemSpinner:before {
 -webkit-animation: loaderHEM 1.3s linear 2s infinite;
 animation: loaderHEM 1.3s linear 2s infinite;
}
@-webkit-keyframes loaderHEM {
10% {
 width: 10px;
 height: 10px;
 opacity: .8;
}
100% {
 width: 50px;
 height: 50px;
 opacity: 0;
}
}
@keyframes loaderHEM {
10% {
 width: 10px;
 height: 10px;
 opacity: .8;
}
100% {
 width: 50px;
 height: 50px;
 opacity: 0;
}
}

<div class="hemLoader">
  <div class="hemSpinner"></div>
</div>

Answer 1

问题似乎不在关键帧，而是在伪元素的使用中。我把它们改成了一些真实的元素，

<div class="hemLoader">
<div class="hemSpinner"><span></span><em></em></div>
</div>

它在我的 safari 5 中有效 demo。 Box-shadow 在 Safari 中似乎也不起作用，所以我添加了边框以强制布局。

CSS3 -webkit 关键帧动画在 windows 的 safari 中不起作用

CSS3 -webkit-keyframe animation not working in safari for windows

css

keyframe

css-transitions

css-animations