最後のキーフレームの後にCSSアニメーションが消えないようにします

Question

シンプルな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;} 
     } 

Answer 1

あなたはこれを防ぐためにanimation-fill-mode: forwardsを必要としています。

また、あなたはそのための最後のフレームが1

jsFiddle exampleの不透明度を持っている必要があり、1の不透明度を終了する必要が - 今期待どおりに動作します。

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ため、ベンダープレフィックスを追加しました。これらに加えて、プレフィックスを付けずに書かなければなりません。キーフレームも同じです。