CSS动画在Safari中不工作

Question

我有一点CSS3动画，它完美的支持CSS3浏览器，除了Safari浏览器。奇怪是不是？好的这里是我的代码：

这里有什么问题。

在此先感谢。

CSS：

@-o-keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
} 
@-moz-keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
} 
@-webkit-keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
} 
@-ms-keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
} 
@keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
} 

.text-bg2 { 
    animation-name:inner-circle; 
    animation-duration:5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
    -webkit-animation-name:inner-circle; 
    -webkit-animation-duration:5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -o-animation-name:inner-circle; 
    -o-animation-duration:5s; 
    -o-animation-iteration-count: infinite; 
    -o-animation-timing-function: linear; 
    -moz-animation-name:inner-circle; 
    -moz-animation-duration:5s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name:inner-circle; 
    -ms-animation-duration:5s; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 
} 

HTML：

<div class="text-bg2"><img src="img/text-bg.png"></div> 

缺少什么我在这里？谢谢！

Answer 1

使用只需要添加供应商特定CSS tranfsorm财产即地方（所有的地方），你已经包括变换，添加CSS的两行如下：

@-o-keyframes inner-circle { 

    0% { 
     transform: rotate(0deg); 
     -ms-transform: rotate(0deg); /* added vendor specific css (IE) */ 
     -webkit-transform: rotate(0deg); /* added vendor specific css (Safari, Opera , Chrome) */ 
    } 
    5% { 
     transform: rotate(0deg); 
     -ms-transform: rotate(0deg);/* added vendor specific css (IE) */ 
     -webkit-transform: rotate(0deg);/* added vendor specific css (Safari, Opera , Chrome) */ 
    } 
    90% { 
     transform: rotate(360deg); 
     -ms-transform: rotate(360deg);/* added vendor specific css (IE) */ 
     -webkit-transform: rotate(360deg);/* added vendor specific css (Safari, Opera , Chrome) */ 
    } 
    100% { 
     transform: rotate(360deg); 
     -ms-transform: rotate(360deg);/* added vendor specific css (IE) */ 
     -webkit-transform: rotate(360deg);/* added vendor specific css (Safari, Opera , Chrome) */ 
    } 
} 

Answer 2

@-webkit-keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
} 

在添加-webkit-只开始，不会改变transform需要它的事实。你需要像在括号里面那样做。 例如：

@-webkit-keyframes inner-circle { 
     0% {-webkit-transform:rotate(0deg);} 
     5% {-webkit-transform:rotate(0deg);} 
     90% {-webkit-transform:rotate(360deg);} 
     100% {-webkit-transform:rotate(360deg);} 
    } 

并且对所有其他人都这样做。

Answer 3

您需要的关键帧动画之前设置动画的名字和时间，而不是后

所以：

.text-bg2 { 
    animation-name:inner-circle; 
    animation-duration:5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
    -webkit-animation-name:inner-circle; 
    -webkit-animation-duration:5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -o-animation-name:inner-circle; 
    -o-animation-duration:5s; 
    -o-animation-iteration-count: infinite; 
    -o-animation-timing-function: linear; 
    -moz-animation-name:inner-circle; 
    -moz-animation-duration:5s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name:inner-circle; 
    -ms-animation-duration:5s; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 
} 

@-o-keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
} 
@-moz-keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
} 
@-webkit-keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
} 
@-ms-keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
} 
@keyframes inner-circle { 
    0% {transform:rotate(0deg);} 
    5% {transform:rotate(0deg);} 
    90% {transform:rotate(360deg);} 
    100% {transform:rotate(360deg);} 
}