CSS过渡闪烁与:在Safari, Chrome和Firefox访问，但不是Opera

Question

(适用于支持CSS过渡的浏览器，包括最新版本的Firefox、Safari和Chrome。奇怪的是，这个问题在Opera中没有出现。

还有人注意到这个吗?当你在:link上添加颜色过渡时，在显示a:hover颜色之前，a:visited会先过渡到a:link颜色。查看一下:

http://jsfiddle.net/Mgzv9/2/

可以避免这种颜色闪烁吗?

Answer 1

这个问题我已经想了一段时间了。

问题是，这个问题实际上很难重现。

好的，那么会发生什么呢，有时在加载/刷新一个带有链接颜色过渡的页面时，颜色首先从默认的浏览器链接颜色过渡到CSS定义的颜色。当我从磁盘打开HTML时，它实际上不会发生在我身上，但如果我把它放在服务器(甚至是本地服务器)中，那么这个问题就会出现。

要重现这个问题，创建一个HTML，添加一个样式表并定义一个链接的过渡，如下所示:

a {
  color: red;
    -webkit-transition: color .5s linear;
    -moz-transition: color .5s linear;
    -o-transition: color .5s linear;
    -ms-transition: color .5s linear;
    transition: color .5s linear;
}
a:hover {
  color: green;
}

…然后在你的HTML中包含样式表。

把文件放在服务器上，尝试在Chrome中打开页面，尝试刷新网站，有时你应该首先看到从默认的蓝色过渡，当页面加载。

在解构了一些似乎没有问题的网站后，我想出了这个简单的解决方案。

如果你也包含了一些Javascript文件，那么就把Javascript includes 放在之后，你的CSS includes.

它甚至可以工作，如果你只是包含一个空的JS文件，在你的样式表。

希望这对你有帮助!

Answer 2

我在使用颜色时从未见过这种情况。但是，当在背景中使用图像时，确实会发生这种情况。这是由于加载时间的原因，可以通过在一个大图像中使用所有过渡图像并使用baground-position属性来控制图像来避免。