web-dev-qa-db-ja.com

CSS3キーフレームアニメーション：終了して最後のフレームにとどまる

CSS3キーフレームアニメーションを再生して、アニメーションが完了した後の最後のフレームに関連する要素を貼り付けようとすると、いくつかの困難に遭遇しました。私の理解では、これが機能するために設定しなければならないプロパティは、アニメーション塗りつぶしモードである必要があります。これは何もしません。

.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に設定しても何もしませんそこにも。

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

javascriptcsscss3animationless
37
Joshua Jennings

animation-fill-mode:forwardsは使用する正しいプロパティです。 Spriteイメージの背景にはデフォルトの background-repeat:repeat があるため、seemは機能しません。したがって、lastあなたが見ていると思うフレームは、実際には繰り返し背景画像のfirstフレームです。

設定した場合

background: url("http://files.simurai.com/misc/Sprite.png") no-repeat

animation: play .8s steps(10) forwards;

@keyframes play {
    from { background-position:    0px; }
    to { background-position: -500px; }
}

デモを実行すると、最終フレームは空白になります。したがって、forwardsは本来すべきことを実行しています。ソリューションの2番目の部分は、最後のtoおよびsteps CSSプロパティを変更して、背景を正しく配置することです。したがって、-450pxで停止し、9ステップを使用するには、バックグラウンドが本当に必要です。

-webkit-animation: play .8s steps(9) forwards;

@keyframes play {
    from { background-position: 0; }
    to { background-position: -450px; }
}

デモを参照 -Chromeプロパティのみを修正しました。サンプル画像もありますオリジナルが消えた場合。

Waving Sprite

.hi {
    width: 50px;
    height: 72px;
    background: url("http://i.stack.imgur.com/ilKfd.png") no-repeat;
    
    -webkit-animation: play .8s steps(9) forwards;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(9) forwards;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}
<div class="hi"></div>
59
andyb

Cssで「無限」を「1」に変更します。これにより修正されます

3
Adam Moseley