CSS3动画:未在Safari中加载 [英] CSS3 animation: Not loading in Safari

问题描述

以下动画甚至没有在Safari浏览器中加载(但在Chrome，Mozilla，IE，Opera中很好地运行了)

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动画无法在野生动物园中使用

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

推荐答案

正如Dan在回答中所说的，缺少 -webkit-前缀.

As Dan stated in his answer, the -webkit- prefix was missing.

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

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

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

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

演示 http://jsfiddle.net/a_incarnati/q0v1wgc8/2/没有"to"和"1turn"

DEMO http://jsfiddle.net/a_incarnati/q0v1wgc8/2/ with no 'to' and '1turn'

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

让我知道它是否可以在Safari 5.0.5中使用

Let me know if it works in Safari 5.0.5

这篇关于CSS3动画:未在Safari中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！