CSS3 -webkit-关键帧动画在safari中不工作

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中为我的演示工作。Box-shadow在Safari中似乎也不起作用，所以我添加了边框来强制布局。