41

CSS3 キーフレーム アニメーションを再生しようとして、アニメーションの完了後に関連する要素を最後のフレームに固定しようとすると、いくつかの問題が発生しました。私の理解では、これが機能するために設定する必要があるプロパティは、アニメーション フィル モードである必要があり、これには forwards の値が必要です。これは何もしません。

.animatedSprite { 
    .animation-name: sprite;
    .animation-duration: .5s;
    .animation-iteration-count: 1;
    .animation-direction: normal; 
    .animation-timing-function: steps(3); 
    .animation-fill-mode: forwards;
    //Vendor prefixes... }

これにより、アニメーションが 1 回だけ再生され、最初のフレームに戻ります。JSFiddle ( http://jsfiddle.net/simurai/CGmCe/ )でキーフレーム アニメーションの例を見つけましたが、塗りつぶしモードを転送に変更し、反復回数を 1 に設定しても、そこでは何も起こりません。

どんな助けでも大歓迎です。

4

4 に答える 4

2

CSSで「無限」を「1」に変更すると、これで修正されます

于 2013-10-21T21:11:13.097 に答える
-2

次のコードは、トランジションを最後のフレームにとどめます。

-webkit-timing-function:ease;
-webkit-iteration-count:1;
于 2015-04-01T07:20:22.323 に答える