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