CSS3 -webkit-keyframe 动画在 Windows 的 Safari 中不起作用答案

【问题标题】：CSS3 -webkit-keyframe animation not working in safari for windowsCSS3 -webkit-keyframe 动画在 Windows 的 Safari 中不起作用
【发布时间】：2015-10-20 00:41:52
【问题描述】：

我的加载动画需要您的帮助。我用过 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>

【问题讨论】：

Windows 版 Safari 已弃用，任何人都不应使用它。
它可能是基于旧版本的 Safari，还不支持它。
我在 w3cschools 上看到了一些示例正在运行。我的意思是 windows 的 safari ..

标签： css css-transitions css-animations keyframe

【解决方案1】：

似乎问题不在于关键帧，而在于使用伪元素。我把它们换成了一些真正的元素，

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

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

【讨论】：