CSS-Animation funktioniert nicht in Safari

Question

Ich habe ein bisschen CSS3-Animation, die perfekt in allen Browsern funktioniert, die CSS3 außer Safari unterstützen. Seltsam ist es nicht? Ok, hier ist mein Code:

Was ist das Problem hier.

danke im voraus.

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> 

Was bin ich hier? Danke!

Answer 1

Verwenden müssen nur herstellerspezifische CSS tranfsorm Eigenschaft also überall dort, wo (alle Plätze) Sie verwandeln gehörten hinzuzufügen, zwei Zeilen CSS hinzufügen, wie folgt:

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

Hinzufügen -webkit- in der nur Anfang, wird nicht die Tatsache ändern, dass transform es braucht. Sie müssen es auch in den Klammern tun. Zum Beispiel:

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

und tun, um all die anderen aswel.

Answer 3

Sie benötigen die Animation Namen und Timing vor der Keyframes Animation und nicht nach

So setzen:

Jede Lösung

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