एनीमेशन के बाद शैलियों को कैसे बनाए रखें?

Question

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

/* This is the CSS of the elements with the id called 'fadein' */ 
#fadein { 
    -moz-animation-duration: 2s; 
    -moz-animation-name: item; 
    -moz-animation-delay: 4.5s; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-name: item; 
-webkit-animation-delay: 4.5s; 
opacity:0; 
-webkit-opacity:0; 
} 

@-webkit-keyframes item { 
from { 
-webkit-opacity: 0; 
    } 
to { 
-webkit-opacity: 1; 
} 
} 

कृपया ध्यान दें कि मैं फ़ायरफ़ॉक्स मुख्य-फ़्रेम बाहर छोड़ दिया है, क्योंकि वे काफी समान हैं:

यह एक विशिष्ट तत्व का एक छोटा सा हिस्सा है। दाएं, बदसूरत-स्वरूपित सीएसएस जो आईडी 'fadein' के साथ तत्व बनाता है ...

समस्या यह है कि एनीमेशन समाप्त होने के बाद तत्व गायब हो जाते हैं। यह बदसूरत-स्वरूपित सीएसएस को अनुपयोगी सीएसएस में बदल देता है।

क्या किसी को पता है कि एनीमेशन के बाद बदली गई शैली को कैसे रखा जाए?

मुझे लगता है कि इस सवाल से पहले पूछा गया है और यदि ऐसा है तो मुझे बहुत खेद है।

Answer 1

कोशिश के साथ:

#fadein { 
    -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */ 
    -moz-animation-fill-mode: forwards; /* FF 5+ */ 
    -o-animation-fill-mode: forwards;  /* Not implemented yet */ 
    -ms-animation-fill-mode: forwards;  /* IE 10+ */ 
    animation-fill-mode: forwards;   /* When the spec is finished */ 
} 

Answer 2

Duopixels जवाब सही तरीका है, लेकिन नहीं पूरी तरह से पार ब्राउज़र, हालांकि, इस jQuery प्लगइन एनीमेशन कॉलबैक सक्षम बनाता है और आप तत्वों है कि कैसे आप कॉलबैक फ़ंक्शन में चाहते शैली कर सकते हैं: https://github.com/krazyjakee/jQuery-Keyframes