CSS3 ट्रांज़िशन: फीका आउट प्रभाव

शुद्ध सीएसएस का उपयोग करके फीका आउट प्रभाव लागू करने का प्रयास करते समय, यह भ्रमित हो सकता है कि स्लाइड एनीमेशन क्यों काम नहीं करेगा. इसका कारण यह है:

प्रभाव को फीका करने की कुंजी अपारदर्शिता गुण को परिवर्तित करने में निहित है। शीर्ष संपत्ति, जो स्लाइड एनिमेशन के लिए उपयोग की जाती है, वांछित प्रभाव उत्पन्न नहीं करेगी। CSS3 ट्रांज़िशन का उपयोग करके प्रभाव को फीका करें:

.hidden { दृश्यता: छिपा हुआ; अपारदर्शिता: 0; संक्रमण: अपारदर्शिता 2s रैखिक; }

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

• मुख्य अंतर फ़ेड आउट और स्लाइड एनीमेशन के बीच परिवर्तित होने वाली संपत्ति निहित है। फ़ेड आउट प्रभाव के लिए, यह अपारदर्शिता गुण है, जबकि स्लाइड एनीमेशन के लिए, यह आम तौर पर शीर्ष या बाएँ जैसी स्थिति गुण है।

प्रदान किए गए कोड के मामले में, एनीमेशन शीर्ष गुण को बदलने के लिए सेट किया गया है , जो तत्व को फीका करने के बजाय स्क्रीन से हटा देगा।