CSS3 动画：未在 Safari 中加载答案

【问题标题】：CSS3 animation: Not loading in SafariCSS3 动画：未在 Safari 中加载
【发布时间】：2015-01-14 05:54:26
【问题描述】：

以下动画甚至无法在 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%}

【问题讨论】：

让我知道它是否有效。

标签： css animation safari gradient

【解决方案1】：

正如 Dan 在他的回答中所说，-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”

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

让我知道它是否适用于 Safari 5.0.5

【讨论】：

【解决方案2】：

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

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

Here's an updated Codepen

在 Safari 7 中测试。

【讨论】：

由于某种原因，当我在 Safari 中打开 CodePen 时，我一直处于 Loading 状态，什么都没有出现...你可以在 Safari 中看到它吗？
是的，我在 Safari 上有点喜怒无常，你能在 JSFiddle 上看到吗？ jsfiddle.net/q0v1wgc8
不。连小提琴都没有。小提琴中的所有窗户对我来说似乎都塌陷了。没有结果。我有 Safari 5.0.5

【解决方案3】：

我想补充一点，该元素应该是 Safari 中的 display:block 类型（display: inline 仅适用于 chrome ...）

【讨论】：