पेज लोड पर सीएसएस ट्रांज़िशन आरंभ को दबाना

कुछ स्थितियों में, सीएसएस ट्रांज़िशन पेज लोड के दौरान अनजाने में सक्रिय हो सकते हैं, जिससे तत्व झिलमिलाहट कर सकते हैं। तत्वों पर रंग परिवर्तन लागू करते समय यह समस्या उत्पन्न हो सकती है।

प्रदान किए गए उदाहरण के अनुसार:

CSS:

p.green {
   color: green;
   transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML:

<p class="green">The Flashing Text</p>

पेज लोड होने पर,

तत्व के भीतर का टेक्स्ट काले (प्रारंभिक रंग) से हरे रंग में परिवर्तित हो जाता है। यह व्यवहार अवांछित है और दृष्टिगत रूप से विघटनकारी हो सकता है।

इस अनपेक्षित परिवर्तन को रोकने के लिए, एक समाधान में क्रोम के व्यवहार के एक अद्वितीय पहलू का लाभ उठाना शामिल है। जब किसी पृष्ठ में

<script> </script>

यह सरल समाधान एक रिक्त