CSS3 animation: Not loading in Safari

问题

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%}

回答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

回答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.

回答3:

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

来源：https://stackoverflow.com/questions/25258359/css3-animation-not-loading-in-safari