2011-10-21 23 views
16

回転アニメーションでは、Chromeでは動作しますが、Firefoxでは動作しません。どうして? 0の時間値は単位がない限りCSSのアニメーション:Chromeでは動作しますが、Firefoxでは動作しませんか?

@-moz-keyframes rotate { 
    from { -moz-transform: rotate(0deg); } 
    to { -moz-transform: rotate(360deg); } 
} 

@-webkit-keyframes rotate { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
} 

#example { 
    background: red; 
    width: 100px; 
    height: 100px; 
    -moz-animation: rotate 20s linear 0 infinite; 
    -webkit-animation: rotate 20s linear 0 infinite; 
} 

http://jsfiddle.net/WsWWY/

+0

ブラウザのバージョンを教えてください。 – Raptor

答えて

29

現在のFirefoxの実装は失敗します。 0sまたは0msを使用してください。

http://jsfiddle.net/WsWWY/1/

注:The W3Cは、明示的に長さの値であるためには、単位なし、番号0が可能になりますが、それは他の値には、このような事を言っていません。個人的には、私はこれが変わることを願っていますが、当面はFirefoxの動作が間違っているわけではありません。

+0

は、「20s」を「2ms」に変更すると、四角形がまったくアニメーション化されないということです。 – Raptor

+2

編集のために@wesley murchありがとう! iPadのキーボードにバックティックキーがないと、実際にスタックがオーバーフローします。 – kojiro

+0

@WesleyMurch:Mac用の私のFF7.0.1上のアニメーションは動きません> 0 < – Raptor

関連する問題