How to Prevent CSS Transitions from Triggering on Page Load in Chrome?

Suppressing CSS Transition Initiation on Page Load

In certain situations, CSS transitions may activate inadvertently during page load, causing elements to flicker. This issue can arise when applying color transitions on elements.

As per the example provided:

CSS:

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

p.green:hover {
   color: yellow;
}

HTML:

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

Upon page load, the text within the

element transitions from black (the initial color) to green. This behavior is unwanted and can be visually disruptive.

To prevent this unintended transition, a solution involves leveraging a unique aspect of Chrome's behavior. When a page contains a

element, Chrome triggers CSS transitions prematurely. By adding a single-space character within a script tag, the presence of this element can be emulated, thus suppressing the erroneous transition:

<script> </script>

This simple workaround addresses the bug in Chrome by providing a blank element, preventing the unnecessary initiation of transitions during page load.

The above is the detailed content of How to Prevent CSS Transitions from Triggering on Page Load in Chrome?. For more information, please follow other related articles on the PHP Chinese website!