Question

我用CSS编写了一个HTML页面，当用户将鼠标放在其上时，文本的颜色变为红色，如果将鼠标移出，则返回白色。

问题是，由于transition: 2s color linear;，页面加载时文本会执行“淡入”动画（我需要将颜色从白色更改为红色，但一开始它是从透明更改为（我认为）为白色）

有没有一种方法可以使文本立即显示而不会淡入淡出？

这是代码和jsfiddle，但是您需要将代码复制并粘贴到计算机上，然后使用浏览器将其打开，以查看“淡入”（在jsfiddle上看起来没有不良影响）< / p>

这是HTML

html,
body {
  background-color: black;
  color: white;
  overflow: hidden;
}

p {
  text-align: center;
  cursor: default;
}

.watermark {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  resize: none;
}

#watermark {
  color: white;
  font-size: 260%;
  transition: 2s color linear;
  -webkit-transition: color 2s linear;
}

#watermark:hover {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s linear;
  color: rgb(255, 17, 69);
}

<!DOCTYPE html>
<html lang="it">

<head>
  <link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>
  <div class="watermark">
    <p id="watermark">hover effect</p>
  </div>
</body>

</html>
=

Answer 1

这与在Chrome中加载CSS文件的方式有关，我敢肯定不是所有的浏览器都会遇到此问题。一种解决方案是创建一个空白脚本标签，以迫使浏览器认为它是在CSS之后加载到文件中的。 Chrome似乎有问题（请参见下面的STackOverflow链接）。

HTML：

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="home.css">
        <script> </script>
    </head>

    <body>
        <div class="watermark">
                <p id="watermark">hover effect</p>
        </div>
    </body>

</html>

编辑：

这里是到堆栈溢出讨论区的链接，其中对此进行了详细介绍。我通读了它，发现了这个简单的修复程序。所以编辑我的答案。

Stop CSS transition from firing on page load

Answer 2

您的过渡声明应为：

transition: color 2s linear;

CSS反向悬停动画

2 个答案: