CSS3 animasyonu safari'de çalışmıyor

Question

CSS3'ü destekleyen tüm tarayıcılarda, safari hariç, CSS3 animasyonu ile ilgili biraz bilgi sahibiyim. Garip değil mi?

HTML ben, hiçbir hareket olmadığından söylediği gibi

.landing .board .right { 
    width: 291px; 
    height: 279px; 
    background: url('../images/landing/key-pnl.png'); 
    bottom: 16px; 
    right: 250px; 
    position: absolute; 
} 
.landing .board .right .key-arm { 
    position: absolute; 
    left: 44px; 
    top: 18px; 
    width: 41px; 
    height: 120px; 
} 



/*=== Key Arm Animation ===*/ 
@-webkit-keyframes keyarm { 
    0% { -webkit-transform: rotate(0deg); } 
    5% { -webkit-transform: rotate(-14deg); } 
    10% { -webkit-transform: rotate(0deg); } 
} 

@-moz-keyframes keyarm { 
    0% { -moz-transform: rotate(0deg); } 
    5% { -moz-transform: rotate(-14deg); } 
    10% { -moz-transform: rotate(0deg); } 
} 

@-ms-keyframes keyarm { 
    0% { -ms-transform: rotate(0deg); } 
    5% { -ms-transform: rotate(-14deg); } 
    10% { -ms-transform: rotate(0deg); } 
} 

@-o-keyframes keyarm { 
    0% { -o-transform: rotate(0deg); } 
    5% { -o-transform: rotate(-14deg); } 
    10% { -o-transform: rotate(0deg); } 
} 

@keyframes keyarm{ 
    0% { transform: rotate(0deg); } 
    5% { transform: rotate(-14deg); } 
    10% { transform: rotate(0deg); } 
} 


.right .key-arm{ 
    -webkit-transform-origin: 12px 105px; 
     -moz-transform-origin: 12px 105px; 
     -ms-transform-origin: 12px 105px; 
     -o-transform-origin: 12px 105px; 
      transform-origin: 12px 105px; 

    -webkit-animation: keyarm 8s ease-in-out 0s infinite; 
     -moz-animation: keyarm 8s ease-in-out 4s infinite; 
     -ms-animation: keyarm 8s ease-in-out 4s infinite; 
     -o-animation: keyarm 8s ease-in-out 4s infinite; 
      animation: keyarm 8s ease-in-out 0s infinite; 
} 

Tamam bu Safari'de çalışmıyor

<div class="right"> 
    <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div> 
</div> 

CSS: Tamam burada benim kod.
Ayrıca, hala ve sadece Safari'de, anahtar kolu div, yalnızca ekranı yeniden boyutlandırırsanız gösterilir! DOM'de var ama bir sebepten dolayı ortaya çıkmıyor!
Neyi yanlış yapıyorum?

Teşekkür
Mauro

GÜNCELLEME: cevaplar gelen Tamam ben @keyframes Safari 4. desteklenmez Çünkü ben @keyframes kullanarak çalışan bir animasyon var aynı sayfada garip olduğunu var!

.board .rays{ 
    background: url("../images/landing/rays.gif") no-repeat 0 0 red; 
    height: 381px; 
    left: 251px; 
    opacity: 1; 
    top: 80px; 
    width: 408px; 
    position: absolute; 
} 

.board .bottle{ 
    background: url("../images/landing/bottle.gif") no-repeat 0 0 lime; 
    bottom: 30px; 
    height: 405px; 
    left: 276px; 
    width: 357px; 
    z-index: 1; 
    position:absolute; 
} 

/*=== Rays Animation ===*/ 
@-webkit-keyframes rays{ 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); } 
} 
@-moz-keyframes rays{ 
    0% { -moz-transform: rotate(0deg); } 
    100% { -moz-transform: rotate(360deg); } 
} 

.board .rays{ 
    -webkit-animation: rays 40s linear 0s infinite; 
    -moz-animation: rays 40s linear 0s infinite; 
    animation: rays 40s linear 0s infinite; 
} 

Ve html: burada

CSS kodu var

<div class="board"> 
    <div class="rays"></div> 
    <div class="bottle"></div> 
</div> 

jsFiddle içinde Kendiniz deneyin (eğer Safari 4 varsa) ve

Answer 1

Bulunan göreceksiniz çözüm.

@-webkit-keyframes keyarm { 
    0% { -webkit-transform: rotate(0deg); } 
    5% { -webkit-transform: rotate(-14deg); } 
    10% { -webkit-transform: rotate(0deg); } 
} 

bu olacaktır:

@-webkit-keyframes keyarm { 
    0% { -webkit-transform: rotate(0deg); } 
    5% { -webkit-transform: rotate(-14deg); } 
    10% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(0deg); } 
} 

Neden bilmiyorum ama şu tarafta

bu çalışmaz: Eğer Kareleri kullandığınızda Safari'de Eğer bütün yüzdesini kullanmak gerekir Safari çalışıyor! :)

Answer 2

Safari 6'da çalışan CSS3 animasyonuyla sıkıntı yaşıyordum, ancak Safari 4'te (4.0.5) çalışmaz.

kısaltma ibaresi Yani bu işe yaramaz Safari 4.

çalışmaz anlaşılmaktadır:

-webkit-animation: rays 40s linear forwards; 

Ama bu çalışacaktır:

-webkit-animation-name: rays; 
-webkit-animation-duration: 40s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-timing-function: linear; 
-webkit-animation-fill-mode: forwards; 

Answer 3

@-webkit-keyframes { <- let this symbol to the same line 
} - > 

Bu dönüşüm ve animatio üzerinde -webkit- öneki ile iphone 3 ios 6.1.6 üzerinde çalışır n

en kısa sürede o DOM enjekte oluyor olarak bir şey üzerinde transform animasyon çalışıyoruz durumlarda

Answer 4

, böyle, çok kısa bir gecikme ekleme yaşadım:

animation: rays 40s linear 0.01s infinite;