सीएसएस एनिमेशन संपत्ति

Question

एनिमेट करने के बाद रहता है मैं पूरा करने के बाद रहने के लिए एक सीएसएस एनीमेशन संपत्ति प्राप्त करने की कोशिश कर रहा हूं, क्या यह संभव है?

यह मैं क्या हासिल करने की कोशिश कर रहा हूँ है ...

तत्व छिपा किया जाना चाहिए जब पृष्ठ पर उपयोगकर्ता भूमि, 3 सेकंड (या जो भी) के बाद, यह में फीका करना चाहिए और एक बार एनीमेशन है इसे पूरा करना चाहिए।

यहाँ एक बेला प्रयास है ... http://jsfiddle.net/GZx6F/

यहाँ संरक्षण के लिए कोड है ...

<h2>Test</h2> 

<style> 
@keyframes fadeIn { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 0.9; 
    } 
} 

h2 { 
    animation: fadeIn 1s ease-in-out 3s; 
} 
</style> 

मुझे पता है कि jQuery के साथ ऐसा करना .. इसे इस तरह होगा। ..

<h2>test</h2> 

<script> 
    $(document).ready(function(){ 
    $('h2').hide().delay(3000).fadeIn(3000) 
    }); 
</script> 

Answer 1

मुझे लगता है कि आप animation-fill-mode CSS3 संपत्ति

के लिए देख रहे

https://developer.mozilla.org/en/CSS/animation-fill-mode

एनीमेशन भरण-मोड सीएसएस संपत्ति निर्दिष्ट करता है कि एक सीएसएस एनीमेशन से पहले और यह क्रियान्वित हो जाने के बाद अपने लक्ष्य के लिए शैलियों लागू करना चाहिए।

अपने उद्देश्य के लिए

सिर्फ

h2 { 
    animation: fadeIn 1s ease-in-out 3s; 
    animation-fill-mode: forwards; 
} 

आगे मूल्य

Answer 2

के अलावा «लक्ष्य गणना मूल्यों निष्पादन के दौरान सामना करना पड़ा पिछले फ़्रेम द्वारा निर्धारित रख सकेंगे» स्थापना सेट करने का प्रयास answer@Fabrizio Calderan, यह कहा जाना चाहिए कि आप animation-fill-mode संपत्ति forwards को सीधे animation पर भी लागू कर सकते हैं। तो निम्नलिखित भी काम करना चाहिए:

@keyframes fadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0.9; 
 
    } 
 
} 
 

 
h2 { 
 
    opacity: 0; 
 
    animation: fadeIn 1s ease-in-out 3s forwards; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<h2>Test</h2>

Answer 3

मैं मेरे लिए कुछ इसी तरह हो रहा था। मैंने स्थिति जोड़ा: तत्व के सापेक्ष जो एनिमेटिंग था और यह मेरे लिए तय किया गया।