CSS एनिमेशन प्रॉपर्टी एनिमेशन करने के बाद रहती है

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>

Comments

क्या w3schools पुराना है? यह कहता है कि Chrome और FireFox केवल विकल्पों का समर्थन करते हैं।

— इब्रानियों लाल

@iambriansreed: मैं हमेशा मान यह है :)

— BoltClock

@iambriansreed भी w3schools खोज परिणामों पर क्लिक नहीं करता है। यदि आप गलती से करते हैं, तो अपने मॉनिटर से दूर देखें और अपने माउस पर बैक बटन दबाएं।

— doug65536

Answer 1

मुझे लगता है कि आप animation-fill-modeCSS3 की संपत्ति की तलाश कर रहे हैं

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

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

अपने उद्देश्य के लिए बस सेट करने का प्रयास करें

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

आगे मूल्य निर्धारित करना «लक्ष्य निष्पादन के दौरान सामने आए अंतिम कीफ्रेम द्वारा निर्धारित गणना मूल्यों को बनाए रखेगा»

Comments

धन्यवाद Fabrizio, यह बहुत अच्छा है, मैं उस जवाब को स्वीकार करूंगा। बस एक अजीब बात हो रही है कि मुझे आश्चर्य है कि क्या आप आईओएस पर कुछ भी जानते हैं - (कुछ और परीक्षण नहीं किया है), जब भी मैं स्क्रॉल करता हूं, तो आसानी से उलटी गिनती को रोक दिया जाता है, जैसे अगर मैं पृष्ठ लोड होने पर सीधे स्क्रॉल करना शुरू करता हूं यह फीका नहीं पड़ता है। लेकिन जब मैं 3s स्क्रॉल करता हूँ तो नीचे की गिनती शुरू हो जाती है। क्या यह केवल डिफ़ॉल्ट iOS व्यवहार है? धन्यवाद

— Sp१२ में स्पार्कहॉक

क्या शानदार उपाय है।

— लालनुंटुलंगा छकछुक

क्या यह कच्चे SVG एनीमेशन में उपलब्ध है?

— जस्टिन

Answer 2

@Fabrizio काल्डेरन के जवाब के अलावा , यह भी कहा जा सकता है कि आप सीधे संपत्ति को भी लागू कर सकते हैं । तो निम्नलिखित भी काम करना चाहिए:animation-fill-modeforwardsanimation

@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

एक तत्व को कैसे एनिमेट किया जाए और इसे प्राप्त करने के लिए एनीमेशन के रूप में किया जाए:

// Beggin

#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}

<div id="box"></div>

Answer 4

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