Question

我的加载动画需要你的帮助。我使用过CSS3关键帧动画，除了Windows Safari外，它还可以与主流浏览器Mac / PC配合使用。

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

提前致谢。

修改：这是一个链接 - https://jsfiddle.net/HemZone/0ottLdds/

＆＃13;

.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;
}
}

＆＃13;

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

＆＃13;

Answer 1

似乎不是关键帧中的问题，而是使用伪元素。我改变了一些真正的元素，

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

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

CSS3 -webkit-keyframe动画不适用于Windows的safari

1 个答案: