CSS3 संक्रमण - फीड आउट प्रभाव

मैं शुद्ध सीएसएस में "फीका आउट" प्रभाव को लागू करने की कोशिश कर रहा हूं। यहां fiddle है मैंने ऑनलाइन कुछ समाधानों को देखा है। हालांकि documentation online CSS3 संक्रमण - फीड आउट प्रभाव

पढ़ने के बाद मैं यह पता लगाने की कोशिश कर रहा हूं कि स्लाइड एनीमेशन क्यों काम नहीं करेगा। कोई संकेतक?

यहाँ एचटीएमएल

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

सीएसएस

.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; 
    } 
}

स्रोत

2013-04-09 Anonymous

आप बदलाव के बजाय का उपयोग कर सकते हैं:

.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; 
}

स्रोत

2013-05-17 14:38:13 karthikr

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

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

स्रोत

2013-04-09 16:13:46 Adrift

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

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

यहां एक उदाहरण है: http://jsfiddle.net/dYBD2/3/ पूर्व विधि – Adrift

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

fadein प्रभाव

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

fadeOut प्रभाव

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

आप विस्तृत लेख here.

UPDATE: मैंने पाया देख सकते हैं और अधिक अप-टू-डेट ट्यूटोरियल CSS3 Transition: fadeIn and fadeOut like effects to hide show elements एक डी Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition यहां नमूना कोड के साथ।

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

स्रोत

2014-01-03 18:07:03

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

मुझे यकीन नहीं है कि आपको यहां क्या चाहिए, लेकिन आप 'दृश्यमान 'वर्ग में' दृश्यता: दृश्य' 'की बजाय' डिस्प्ले: ब्लॉक 'को आज़मा सकते हैं,' दृश्यमान 'के बजाय' प्रदर्शन: कोई नहीं '' छुपाएं'।उपरोक्त उदाहरण से छुपा 'वर्ग। –

@MMTac यह काम नहीं करता है क्योंकि 'डिस्प्ले' [एनिमेटेबल सीएसएस गुणों] में से एक नहीं है (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)। देखें ["डिस्प्ले: ब्लॉक" से "डिस्प्ले: कोई नहीं" से एनिमेटिंग] (http://www.impressivewebs.com/animate-display-block-none/)। – peterflynn

बस एफवाईआई, animate.css नामक एक बहुमुखी लाइब्रेरी है जिसे आप रुचि रखते हैं, इसमें शुद्ध CSS3 एनीमेशन का पूरा समूह है। आप इसे उठा सकते हैं और इसका उपयोग कर सकते हैं या नीचे तकनीक सीख सकते हैं।

स्रोत

2014-03-19 01:59:48 jasonslyvia

.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; 
}

demo here.

स्रोत

2014-07-01 13:55:29

यह अपने प्रश्न के लिए काम कर रहे कोड है।
कोडिंग ....

<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>

स्रोत

2017-09-28 05:54:56

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

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

CSS3 संक्रमण - फीड आउट प्रभाव

उत्तर

संबंधित मुद्दे