サファリでCSS3アニメーションが動作しない

Question

サファリ以外のCSS3をサポートするすべてのブラウザで完全に動作するCSS3アニメーションが少しあります。奇妙じゃない？ [OK]を、ここに私のコードです：

HTML

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

CSS

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

私は全く動きがありません、言ったように[OK]を、これはSafariで動作しません。
また、Safariのキーアーム部門は、画面のサイズを変更した場合にのみ表示されます。それはDOMの中にありますが、何らかの理由でそれが表示されません！
何が間違っていますか？

おかげ
マウロ

UPDATE：あなたの答えから[OK]を@keyframesはサファリ4でサポートされていないことを同じページに、私は@keyframesを使用して動作するアニメーションを持っているので、私はそれは奇妙だしまいました！

ここでCSSのコードです：

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

とHTML：（あなたはSafariの4持っている場合）

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

はjsFiddleでそれを自分で試してみて、あなたが

Answer 1

が見つかり表示されますが、溶液。これは動作しません

：

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

この意志を：

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

はなぜ分からないのですが、それは方法ですあなたがキーフレームを使用するときのSafariでは、あなたは全体の割合を使用する必要がありますSafariが動作します！ :)

Answer 2

私はSafari 6では動作しているが、Safari 4（4.0.5）では動作していないCSS3アニメーションで問題を抱えていました。

省略表記だから、これは動作しませんサファリ4

に動作しないこと表示されます。

-webkit-animation: rays 40s linear forwards; 

をしかし、これは動作します：

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

これは、iphone 3 ios 6.1.6 で、-webkit-の接頭辞が変換とアニメーションに作用しますnは

Answer 4

あなたはできるだけ早くそれがDOMに注入だとして何かにtransformをアニメーション化しようとしている状況で、私は非常に短い遅延を追加しなければならなかった、このような：

animation: rays 40s linear 0.01s infinite;