Disable CSS animation trigger on load

396 Views Asked by At

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?

2

There are 2 best solutions below

0
On BEST ANSWER

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.

1
On

Have you tried just actual Chrome? Chromium and Chrome Canary are development browsers and always run in beta mode so don't expect an standard behavior.