由于某种原因从页面加载开始转换

Question

更新： 当我把 CSS 放在内部时，问题就消失了。我进入 chrome 上的开发工具并比较了重新加载页面时发生的情况。第一张图片带有内部样式表 CSS，第二张图片带有外部样式表，您可以看到 background-color 属性:

的不同结果

初始post:我不知道为什么会这样，这里有一个demonstration。基本上，a 需要一些时间才能完全显示在页面上。

'fully' 出现所需的时间与 transition: background 5s; 中指定的时间相同，为 5 秒。

下面是同样的代码在另一个page上没有观察到效果，我也是用同一个浏览器打开的

这是我在 Visual Studio 和 Chrome 中的代码，在 Edge 中观察到相同的行为，但在 Firefox 中没有观察到，在 Firefox 中它只是按预期加载并且 :hover 效果好好工作。在撰写本文时，所有 3 种浏览器都已更新到最新版本。

只有当我 link 到外部 CSS 样式表时才会发生这种情况。当我将 css 复制到 html 文件时，问题就消失了！！！

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>

Answer 1

我解决了这个问题，一直在 google 寻找答案。解决方法是在 html 文件中添加 <script> </script> 个开始和结束标记，以 space 分隔。显然这是前面提到的浏览器中的错误。

由于某种原因从页面加载开始转换

Transition starting on page load for some reason

html

css

css-transitions