Shannon Hochkins Shannon Hochkins - 2 months ago 20
CSS Question

Injecting css without transitions from user-stylesheets

I've setup a build with webpack, where all my css injected as inline css in the head and is created after the main javascript file is loaded.

I'm getting a lot of transitions happening at page load, I believe this is because of the user-agent style sheet.

Let's say I have a button with a background color of black, by default the background colour is starting at white and animating to black when i have:

button {
transition: all 0.4s ease;
background-color:black;
}


Is there a way to stop the browser from transitioning from the default stylesheet?

Answer

What if you added a class name to the body, .no-transition for example.

include something like this in your document css: body.no-transition * { transition:none !important; }

This will hopefully overwrite all of the transitions that are about to be loaded into the page.

After your css is inserted into the head, use javascript or jquery to remove the .no-transition class from the body tag.