Search code examples
htmlcsscss-animationsblink

Disable CSS animation trigger on load

I'm working on web page and recently encountered a problem with following code.

Here is maximally minified example:

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
    <div id="author">Lorem ipsum</div>
</body>

style.css

#author {
    color: #f0f0f0;
    transition: color 0.5s ease-in-out;
}

Basically I want later to make #author to change color on hover with fade, and this works as desired.

The problem I have is that, when I open it in Chrome (Chromium actually), I get the transition from black to #f0f0f0 immediately after loading the page, and I have no idea why. This definitely does not happen on Firefox. What should I do to prevent it from happening on Chrome?

Solution

  • Okay, now, this is embarassing, but I found the source. It was caused by the Stylebot extension, and turning it off stopped the effect.

    What's interesting is that it's Stylebot's very presence what was interfering, it was neither set to modify anything, nor ever activated on that site.