CSS3动画:未在Safari中加载

Question

以下动画甚至不能在Safari浏览器中加载(但在Chrome、Mozilla、IE、Opera中都能很好地工作)

http://codepen.io/anon/pen/utdIK

你知道怎么修复它吗？这个问题看起来很相似，但它不适合我的问题。

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

正如丹在他的回答中所说，-webkit-前缀丢失了。

Safari5的一个问题是浏览器不会解释简写属性。您需要完整地指定每个动画属性。

-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);

如果仍然不起作用，您可以尝试删除to并添加百分比，然后更改1turn单位并添加以度为单位的默认值。

@-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);
}

不带'to‘和'1turn’的演示 http://jsfiddle.net/a_incarnati/q0v1wgc8/2/

演示 http://jsfiddle.net/a_incarnati/q0v1wgc8/3/

让我知道它是否能在Safari 5.0.5中工作

Answer 2

您的webkit特定关键帧中缺少-webkit-前缀。

@-webkit-keyframes spin {
    to {
    -webkit-transform: rotate(1turn);
}

Here's an updated Codepen

在Safari 7中进行了测试。

Answer 3

我只想补充一下，在Safari中，元素应该是display:block类型(display: inline只适用于chrome ...)