अंतिम कुंजी फ्रेम

Question

के बाद सीएसएस एनीमेशन गायब नहीं हो सकता है मुझे एक साधारण सीएसएस एनीमेशन मिला है जिसे मैं खेलना चाहता हूं और फिर छवि को पूरी तरह से प्रदर्शित करने वाले अंतिम फ्रेम पर रोक सकता हूं। लेकिन वर्तमान में इस समय यह खेलता है, फिर एक फ्रेम को वापस लौटता है ताकि संतों का चेहरा गायब हो जाए।

मैं इसे एक बार के माध्यम से कैसे खेल सकता हूं, फिर आखिरी कुंजी फ्रेम पर रुक सकता हूं या छवि को फिर से बाहर फिसलने के बिना प्रदर्शित कर सकता हूं?

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 का एक अस्पष्टता के साथ समाप्त करने के लिए की जरूरत है, इसलिए अंतिम फ्रेम के 1.

jsFiddle example एक अस्पष्टता होना आवश्यक है - के रूप में अब उम्मीद है कि यह काम करता है।

आप 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 के लिए विक्रेता उपसर्गों जोड़ा। इनके अलावा आपको एक उपसर्ग के बिना लिखा जाना चाहिए। कीफ्रेम के लिए भी चला जाता है।