2012-04-27 13 views
5

IE10で約1日働いていたスケールアニメーションが停止してしまいました。私は何も変更していないし、何が起こるか分からない。IE10 - CSSアニメーションが動作しない

誰にもアイデアはありますか? IEの開発ツールを見ると、アニメーション名は取得されませんが、その他のプロパティはすべて取得されています。ここで

は、CSSです:

@-ms-keyframes move97 
{ 
    0% { 
     transform:scale(1,1); 
     -ms-transform:scale(1,1); 
     -moz-transform:scale(1,1); 
     -webkit-transform:scale(1,1); 
     -o-transform:scale(1,1); 
    } 
    50% { 
     transform:scale(0.97,0.97); 
     -ms-transform:scale(0.97,0.97); 
     -moz-transform:scale(0.97,0.97); 
     -webkit-transform:scale(0.97,0.97); 
     -o-transform:scale(0.97,0.97); 
    } 
    100% { 
     transform:scale(1,1); 
     -ms-transform:scale(1,1); 
     -moz-transform:scale(1,1); 
     -webkit-transform:scale(1,1); 
     -o-transform:scale(1,1); 
    } 
} 

.press97 
{ 
    -ms-animation-name: move97 0.2s; /* note MS has this different.... ugh */ 
    animation: move97 0.2s; 
    -moz-animation: move97 0.2s; /* Firefox */ 
    -webkit-animation: move97 0.2s; /* Safari and Chrome */ 

    animation-timing-function: linear; 
    -moz-animation-timing-function: linear; 
    -webkit-animation-timing-function: linear; 
    -ms-animation-timing-function: linear; 

    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    -ms-animation-fill-mode: forwards; 
} 
+4

あなたが内部の '@ IE以外のベンダー拡張を使用しているなぜ私が尋ねるかもしれません-ms-keyframes'ブロックはIEによって読み込まれるだけです。 –

+0

私はスタイルシートの中にコピーして貼り付けていました。 – dex3703

+1

あなたはまた、修正されていないものに基づいて、常に標準に従ってプロパティリストを終了する必要があります。 –

答えて

5

どうやら私は、次のされたヘルプリンクが正しくありません。 -ms-animation:move97 0.2sに変更すると動作します。これは私が元々持っていたものであり、うまくいきませんでしたので、上に示したものに変更しました。私は続い

ヘルプリンク:http://msdn.microsoft.com/library/ie/hh673530.aspx

私はそれが修正されるだろうと言われてきました。

15

標準構文はsupported in Internet Explorer 10で、キーフレーム宣言の-msプレフィックスやanimation-nameプロパティのプレフィックスは不要です。実際には、IE10は、他のベンダーの製品のように、同様に単独の速記animationプロパティをサポートしています。

@keyframes myanimation { 
    0% { color: black; } 
    80% { color: gold; transform: translate(20px,20px); } 
    100% { color: black; translate(0,0); } 
} 

#anim { 
    display: inline-block; 
    animation: myanimation 5s 5; /* use myanimation 5s duration, 5 times */ 
} 

フィドル:http://jsfiddle.net/ZfJ4Z/1/

+5

メディアクエリは、IEがキーフレームアニメーションも見るのをブロックする可能性があります。 –

+1

私は自分のファイルを自分のメディアのクエリでラップされたコンポーネントに入れずに取り出し、修正しました。おかげでグラハム – ConorLuddy

関連する問題