CSS3 animation: Not loading in Safari - css

Question

the following animation doesn't even load in Safari browser (but works nicely in Chrome, Mozilla, IE, Opera)
http://codepen.io/anon/pen/utdIK
Any idea how to fix it? This problem looks similar, but it didn't fit to my problem.
CSS3 animation not working in safari
HTML:
<div id="spinner-2">
<div class="slices bar">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="maskWheel"></div>
</div>
CSS:
#spinner-2 {
width: 45px;
height: 45px;
-webkit-border-radius: 100px;
-moz-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
-webkit-animation: spin .8s infinite steps(8);
-moz-animation: spin .8s infinite steps(8);
-ms-animation: spin .8s infinite steps(8);
-o-animation: spin .8s infinite steps(8);
animation: spin .8s infinite steps(8);
}
.slices {
width: 45px;
height: 45px;
position: relative;
transform-origin: right bottom;
}
.slices.bar div {
width: 100%;
height: 100%;
position: absolute;
-webkit-border-radius: 100px;
-moz-border-radius: 50%;
border-radius: 50%;
background: -webkit-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: -moz-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: -o-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background-repeat: no-repeat;
background-size: 50% 50%}
#-webkit-keyframes spin {
to {
transform: rotate(1turn);
}
}#-moz-keyframes spin {
to {
transform: rotate(1turn);
}
}#-ms-keyframes spin {
to {
transform: rotate(1turn);
}
}#keyframes spin {
to {
transform: rotate(1turn);
}
}.slices.bar div:nth-child(1) {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.slices.bar div:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.slices.bar div:nth-child(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.slices.bar div:nth-child(4) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.slices.bar div:nth-child(5) {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.slices.bar div:nth-child(6) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.slices.bar div:nth-child(7) {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.slices.bar div:nth-child(8) {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.slices.bar div:nth-child(3) {
background: linear-gradient(45deg, #ed3000 43%, transparent 43%) 0 0;
background-repeat: no-repeat;
background-size: 50% 50%}

Answer 1

As Dan stated in his answer, the -webkit- prefix was missing.
One issue for Safari 5 is that shortend properties will not be interpreted by the browser.
You need to specify each single animation property in full.
-webkit-animation-name: spin;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(8);
-moz-animation-name: spin;
-moz-animation-duration: 8s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(8);
-ms-animation-name: spin;
-ms-animation-duration: 8s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: steps(8);
-o-animation-name: spin;
-o-animation-duration: 8s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: steps(8);
animation-name: spin;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: steps(8);
If still does not work you can try to remove the to and add the percentage and change the 1turn unit and add the default one in degrees.
#-webkit-keyframes spin {
100% {
transform: rotate(360deg);
}
}#-moz-keyframes spin {
100% {
transform: rotate(360deg);
}
}#-ms-keyframes spin {
100% {
transform: rotate(360deg);
}
}#keyframes spin {
100% {
transform: rotate(360deg);
}
DEMO http://jsfiddle.net/a_incarnati/q0v1wgc8/2/ with no 'to' and '1turn'
DEMO http://jsfiddle.net/a_incarnati/q0v1wgc8/3/
Let me know if it works in Safari 5.0.5

Answer 2

The -webkit- prefix was missing from your webkit specific keyframe.
#-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
}
Here's an updated Codepen
Tested in Safari 7.

Answer 3

I would just like to add that the element should be display:block type in Safari (display: inline works in chrome only ...)