Q:

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

I need your help for my loading animation. I've used CSS3 Keyframe animation, It's working fine with major browsers Mac/PC except Windows Safari.
I don't know what's wrong in my code. Please help me 
Thanks in advance.
Edit: Here is a 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>

A:

Seems like the problem not in keyframes, but rather in use of pseudo elements. I changed'em to some real elems, 
<div class="hemLoader">
<div class="hemSpinner"><span></span><em></em></div>
</div>

it works in safari 5 for me demo.
Box-shadow doesn't seem to work in Safari as well, so i added border to force layout.

