CSS3 -webkit-keyframe 动画在 safari for windows 中不起作用

Question

我的加载动画需要你的帮助。我使用过 CSS3 关键帧动画，它在除 Windows Safari 之外的主要浏览器 Mac/PC 上运行良好。

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

提前致谢。

编辑:这是一个链接 - 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 中似乎也不起作用，所以我添加了边框以强制布局。