Transition starting on page load for some reason

问题

Update: when I put the CSS internally, the problem goes away. I went in the dev tools on my chrome and compared what was happening when I reloaded the page. First image is with internal CSS, the second one is with external stylesheet, you can see different results for the background-color property:

Initial post: I have no idea why this is happening, here's a demonstration. Basically, the a takes some time to appear fully on the page.

The time it takes to 'fully' appear is the same duration specified in transition: background 5s; as in 5 seconds.

Here's the same code on another page where the effect is not observed, I also opened it in the same browser.

Here's my code in Visual Studio and in Chrome, the same behavior is observed in Edge but not in Firefox, in Firefox it just loads as it should and the :hover effects work properly. All 3 browsers are updated to their latest versions at the time of writing.

This only happens when I link to an external CSS stylesheet. When I copy the css to the html file the problem goes away!!!

CSS

a {
  color: #fff;
  border: none;
  margin: 20px;
  padding: 10px 20px;
  display: inline-block;
  font: bold 18px sans-serif;
  background: #fd7c2a;
  text-decoration: none;
  -webkit-transition: background 5s; /* For Safari 3.0 to 6.0 */
  transition: background 5s; /* For modern browsers */
}

a:hover {
  background: #3cc16e;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <!-- Specifies a description of the page. Search engines can pick up this description to show with the results of searches -->
    <meta name="keywords" content="" />
    <!-- Specifies a comma-separated list of keywords - relevant to the page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title></title>
  </head>

  <body>
    <p><a href="#">Hover on me</a></p>
  </body>
</html>

回答1:

I solved the issue, been going through google for answers. The solution is to add <script> </script> opening and closing tags in the html file separated by space. Apparently its a bug in the browsers mentioned before.

来源：https://stackoverflow.com/questions/61658299/transition-starting-on-page-load-for-some-reason

标签

html

css

css-transitions