web-dev-qa-db-ja.com

IE10-CSSアニメーションが機能しない

IE10で約1日動作した後、停止したスケールアニメーションがあります。私は何も変更を加えておらず、それを壊すために何が起こるかわかりません。

誰かアイデアはありますか？ 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;
}
animationcssinternet-explorer-10
6
dex3703

どうやら私がフォローしていたヘルプリンクが正しくありません。 -ms-animation：move97 0.2sに変更すると、機能します。これは私が最初に持っていたものであり、機能しなかったので、上に示したものに変更しました。

私がたどったヘルプリンク： http://msdn.Microsoft.com/library/ie/hh673530.aspx

修正されると言われました。

5
dex3703

標準の構文は 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/

19
Sampson