Home > Article > Web Front-end > 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