css animation plays with external style sheet on load - html

Question

I have an external style sheet that contains transitions. When the page loads the transitions animate.
When I move the transitions from the external style sheet and place them in the header of my html file, the animations don't animate on page load (Which is what I want).
What can I do to stop the transitions from animating when placed in an external style sheet?
Here is some example css:
label {
font-size: 18px;
transition: all 0.2s ease-in-out;
}
When this is in a css file, the font goes from the page size to the css file size.
When this is in the header in a <style> tag it doesn't do anything.

Answer 1

This is because the stylesheets are loading synchronously, while the external sheets load asynchronously. When they load synchronously, transitions aren't triggered because the DOM only has to draw once; There's nothing to transition from. Meanwhile, the few milliseconds it takes to load a stylesheet externally requires the DOM to be redrawn again once it loads.
In this case, you should be using animations, not transitions. Animations will run on start no matter what.
#keyframes slide-in {
from {
opacity: 0;
width: 0%;
}
to {
opacity: 1;
width: 100%;
}
}
.animate-me {
background: red;
height: 100px;
color: white;
animation: slide-in 1s ease-in-out;
}
<div class="animate-me">animate me on load</div>
If you really do need transitions, you'll need some javascript to apply a class after at least one frame delay.
setTimeout(function() {
// apply class to elements
}, 0);