Question

以下动画甚至不会在Safari浏览器中加载（但在Chrome，Mozilla，IE，Opera中运行良好）

知道怎么解决吗？这个问题看起来很相似，但它不符合我的问题。

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-前缀丢失了。

Safari 5的一个问题是浏览器不会解释短端属性。您需要完整指定每个动画属性。

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

DEMO http://jsfiddle.net/a_incarnati/q0v1wgc8/2/没有'to'和'1turn'

DEMO 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中的块类型（显示：内联仅适用于chrome ...）

CSS3动画：未在Safari中加载

3 个答案: