CSS3 संक्रमण - प्रभाव को फीका करें

Question

मैं शुद्ध सीएसएस में "फीका आउट" प्रभाव को लागू करने की कोशिश कर रहा हूं। यहाँ है बेला । मैंने ऑनलाइन समाधानों के एक जोड़े को देखा, हालांकि, ऑनलाइन दस्तावेज़ पढ़ने के बाद , मैं यह जानने की कोशिश कर रहा हूं कि स्लाइड एनीमेशन काम क्यों नहीं करेगा। कोई संकेत?

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}

.success-wrap {
  width: 75px;
  min-height: 20px;
  clear: both;
  margin-top: 10px;
}

.successfully-saved {
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 40px;
  margin-bottom: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #00b953;
}

@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-moz-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-webkit-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-o-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>

Answer 1

आप इसके बजाय संक्रमण का उपयोग कर सकते हैं:

.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}

Comments

ब्राउज़र की जरूरत नहीं है उपसर्ग इन दिनों बस सादा ol '... संक्रमण: अपारदर्शिता 3s आसानी से अंदर;

— danday74

Answer 2

यहाँ भी ऐसा ही करने का एक और तरीका है।

fadeIn प्रभाव

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

फीका प्रभाव

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

UPDATE 1: मुझे और अधिक अप-टू-डेट ट्यूटोरियल CSS3 संक्रमण मिला: शो तत्वों और टूलटिप उदाहरण को छिपाने के लिए fadeIn और fadeOut जैसे प्रभाव : नमूना कोड के साथ यहां CSS3 संक्रमण का उपयोग करके हिड हिंट या हेल्प टेक्स्ट दिखाएं ।

UPDATE 2: (@ बिग-मनी द्वारा अनुरोधित विवरण)

जब तत्व दिखाते हैं (दृश्यमान कक्षा पर स्विच करके), हम दृश्यता चाहते हैं: तुरंत किक करने के लिए दृश्यमान है, इसलिए केवल अस्पष्टता संपत्ति को संक्रमित करना ठीक है। और जब तत्व छिपाते हैं (छिपे हुए वर्ग पर स्विच करके), हम दृश्यता में देरी करना चाहते हैं: छिपी हुई घोषणा, ताकि हम पहले फीका-बाहर संक्रमण देख सकें। हम दृश्यता गुण पर संक्रमण की घोषणा करके ऐसा कर रहे हैं, 0s अवधि और देरी के साथ। आप यहाँ विस्तृत लेख देख सकते हैं ।

मुझे पता है कि मुझे उत्तर देने में बहुत देर हो गई है लेकिन इस उत्तर को दूसरों के समय को बचाने के लिए पोस्ट कर रहा हूं। आशा है कि यह आपकी मदद करता है !!

Comments

अच्छा जवाब, मैं display:noneउस बॉक्स को मिटाने के लिए जोड़ना चाह रहा हूं जब "छिपाना" एनीमेशन समाप्त होता है, कोई विचार?

— अपोलो

मुझे यकीन है कि आप यहाँ क्या जरूरत है नहीं कर रहा हूँ, लेकिन आप कोशिश कर सकते हैं display:blockके बजाय visibility: visibleमें .visibleवर्ग इसी तरह display:noneके बजाय visibility: hiddenमें .hiddenऊपर के उदाहरण से वर्ग।

— इमयंकमोडी

@MMTac काम नहीं करता है क्योंकि यह एनिमेटिड CSS गुणों में से displayएक नहीं है । देखें ": ब्लॉक प्रदर्शन" के लिए "प्रदर्शन: कोई" से Animating ।

— पेट्रिग्नन

@MayankModi फीडेओट प्रभाव के लिए दृश्यता पर पहले 0 s का क्या मतलब है? यह मेरी समझ है कि आपको बस 2s की जरूरत है

— बिग मनी

@BigMoney यह अवधि और विलंब के लिए है (सुनिश्चित करें कि आप अपनी आवश्यकताओं के अनुसार उन संख्याओं को संशोधित कर सकते हैं, जिनका उपयोग केवल उदाहरण के लिए किया जाता है)। जाँच करें कि मैंने विवरण अपडेट कर दिया है क्योंकि यह उत्तर अभी भी सक्रिय है।

— इमयंकमोडी

Answer 3

चूंकि displayएनिमेटेबल सीएसएस गुणों में से एक नहीं है। display:noneशुद्ध CSS3 एनिमेशन, बस सेट width:0और height:0अंतिम फ्रेम के साथ एक fadeOut एनीमेशन प्रतिस्थापन , और animation-fill-mode: forwardsरखने के लिए width:0और height:0गुणों का उपयोग करें ।

@-webkit-keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}  
@keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}

.display-none.on{
    display: block;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

Comments

में देखो उच्च निष्पादन एनिमेशन । आपको सीएसएस गुणों का उपयोग करने से बचना चाहिए जो पुन: लेआउट को ट्रिगर करते हैं , widthऔर heightदोनों संवेदनशील हैं।

— पेनी लियू

Answer 4

यह आपके प्रश्न के लिए काम करने वाला कोड है।
कोडिंग का आनंद लें…।

<html>
   <head>

      <style>

         .animated {
            background-color: green;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;animation-duration: 10s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         }

         @-webkit-keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeOut"></div>

   </body>
</html>

Comments

कृपया अपने समाधान की व्याख्या संलग्न करें: यह कैसे काम करता है? यह पहले से ही पोस्ट किए गए अन्य समाधानों से अलग क्यों है?

— जीवनकाल

@lifeisfoo मैंने सभी समाधानों से ऊपर की कोशिश की, लेकिन यह इसे करने का सरल और सबसे आसान तरीका है और एक और महत्वपूर्ण बात यह है कि पाठ कुछ सेकंड (10) के बाद अपने आप मिट जाएगा। इसलिए किसी भी क्लिक की आवश्यकता नहीं है।

— विशाल बिरादर

Answer 5

आप .dummy-wrapवर्ग में एक स्थिति संपत्ति जोड़ना भूल गए , और शीर्ष / बाएँ / नीचे / दाएं मान सांख्यिकीय रूप से तैनात तत्वों (डिफ़ॉल्ट) पर लागू नहीं होते हैं

http://jsfiddle.net/dYBD2/2/

Comments

धन्यवाद, लेकिन मैं पूरी तरह से संक्रमण के बाद कैसे छिपाऊंगा?

कई तरीके हैं - आप केवल topमूल्य बढ़ा सकते हैं ताकि यह व्यूपोर्ट को "बंद" कर दे या आप एनीमेशन के लिए अस्पष्टता का उपयोग कर सकें, ताकि यह बाहर निकले जैसे कि आप चाहते हैं कि लगता है ..

— जेसन यारगि

महान .. मुझे वह मिल गया है, लेकिन एक और सवाल, छिपी हुई देवी फीका वापस क्यों आती है?

Answer 6

.fadeOut{
    background-color: rgba(255, 0, 0, 0.83);
    border-radius: 8px;
    box-shadow: silver 3px 3px 5px 0px;
    border: 2px dashed yellow;
    padding: 3px;
}
.fadeOut.end{
    transition: all 1s ease-in-out;
    background-color: rgba(255, 0, 0, 0.0);
    box-shadow: none;
    border: 0px dashed yellow;
    border-radius: 0px;
}

यहां डेमो करें।