'CSS transitions always start at user agent style sheet

I'm currently fiddling with a website, and I wanted to animate a button's background color on hover. Unfortunately, the button will always start as white (browser default, Firefox) and transition into its proper color.

#controldiv button {
    border: none;
    outline: none;
    font-size: 16pt;
    color: #000;
    background-color: #0f0;
    transition: background-color 2s ease-in-out;
}

In HTML world...

    <div id="controldiv">
        <button id="connect">Connect</button>
    </div>

The transition from white to the desired color always happens when the page refreshes, which makes it really annoying. Any advice?

htmlcsscss-transitions


Solution 1:[1]

So the issue was being caused by the styles being loaded by an external stylesheet, and I found a somewhat working solution. By preloading the stylesheet:

<link rel="preload" href="test.css" as="style">
<link rel="stylesheet" href="test.css">

The transition disappears. Unfortunately, the transition still appears on pages loaded from files, but in practice this works (it's a WEBsite after all). If there's a better solution (besides inline styles) out there though, I would love to hear it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Windzyboy

Related Questions