web-dev-qa-db-ja.com

最後のキーフレームの後にCSSアニメーションが消えるのを止められない

単純なcssアニメーションを再生し、最後のフレームで停止して画像を完全に表示します。しかし、現在のところ、それが再生されると、フレーム1に戻ってサンタの顔が消えるようです。

一度再生してから最後のキーフレームで停止するか、再びフェードアウトせずに画像を表示するにはどうすればよいですか？

http://jsfiddle.net/uy25Y/

    <img class="santaface" src="http://imgs.tuts.dragoart.com/how-to-draw-a-santa-face_1_000000001282_3.jpg">

     .santaface{
          opacity:0;
          position: absolute;
          left:40%; top:20%; width:20%;
            -webkit-animation-name: santaappear;
            -webkit-animation-duration: 13s;
            }


        .santaface{-webkit-animation-delay:2s;animation-delay:2s;}

        @-webkit-keyframes santaappear {
            0% { opacity:0;}
               96% {opacity:1;}
        }
csscss-animations
17
Dano007

これを防ぐには、animation-fill-mode: forwardsが必要です。

さらに、1の不透明度で終了する必要があるため、最後のフレームの不透明度は1でなければなりません。

jsFiddleの例 -これは期待どおりに動作します。

0%を削除してキーフレームを短くすることもできます。これは、初期状態ですでに指定されているためです。

@keyframes santaappear {
    96% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}

96%と100%を組み合わせることもできます。

@keyframes santaappear {
    96%, 100% {
        opacity:1;
    }
}

複数のアニメーションプロパティを使用しているため、 animation shorthand を使用します。

<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>`

どちらになるでしょう：

animation: santaappear 13s 2s forwards;
-moz-animation: santaappear 13s 2s forwards;
-webkit-animation: santaappear 13s 2s forwards;

デモでは、-moz/-webkitのベンダープレフィックスを追加しました。これらに加えて、接頭辞なしで書かれている必要があります。キーフレームについても同様です。

30
Josh Crozier