सीएसएस संक्रमण केवल तत्व के लिए फीका

Question

क्या सीएसएस संक्रमण संपत्ति का उपयोग करके केवल तत्व में फीका करने का कोई तरीका है? इससे पहले कभी इसकी आवश्यकता नहीं थी, इसलिए इसमें ध्यान नहीं दिया गया है, और अब मुझे जेएस का उपयोग किए बिना ऐसा करने की विधि नहीं मिल रही है। क्या तत्काल वापसी की स्थिति के लिए संक्रमण स्थापित करना संभव है?

Answer 1

यह माउस-इन/माउस-आउट पर फीका-इन/फीड-आउट होगा। आप मूल अस्पष्टता 0 पर सेट कर सकते हैं और इसे अपनी स्थिति में लागू कर सकते हैं।

.item { 
height:200px; 
width:200px; 
background:red; 
-webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
     transition: opacity 1s ease-in-out; 
} 

.item:hover { 
zoom: 1; 
filter: alpha(opacity=50); 
opacity: 0.5; 
} 

बेला

http://jsfiddle.net/7uR8z/6/

Answer 2

वहाँ, में होने के लिये जब आप अपने फीका चाहिए उसके आधार पर कुछ तरीके यह करने के लिए:

jsFiddle

/***** Fade in on a page load *****/ 
.fadeInLoad { 
    border: 1px solid #48484A; 
    font-size: 40px; 
    animation: fadeInLoad 5s; 
} 
@keyframes fadeInLoad { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 

/***** Fade in child when parent hovered *****/ 
.fadeIn { 
    border: 1px solid #48484A; 
    font-size: 18px; 
    opacity:0; 
    -webkit-transition : all 2s ease-out; 
    -moz-transition : all 2s ease-out; 
    -o-transition : all 2s ease-out; 
    transition : all 2s ease-out; 
} 
.thisText:hover .fadeIn { 
    opacity: 1; 
} 

नोट: पृष्ठ लोड पर फीका करने के लिए आपको एक सरल कीफ्रेम एनीमेशन की आवश्यकता है, एक संक्रमण नहीं।