Question

我目前已将 CSS3过渡添加到我的网站。如果可能的话，我不会感到害羞，它会减慢我的网站速度，但一切似乎都在闪烁，并且在转换和Flash视频上存在这种“不稳定的行为”。

我正在使用Mozilla Firefox 10.0.02。

我在CSS样式表中添加了以下内容：

*:link, *:visited, *:hover, *:active, *:focus {
    -webkit-transition: color .25s linear, background-color .25s linear, border-color .25s linear;
    -o-transition: color .25s linear, background-color .25s linear, border-color .25s linear;
    -moz-transition: color .25s linear, background-color .25s linear, border-color .25s linear;
    transition: color .25s linear, background-color .25s linear, border-color .25s linear;
}

你能否告诉我，我的浏览器是否很慢或是否是我添加的CSS以及是否有证据？

谢谢！

Answer 1

那是因为你已经为这些状态的所有内容添加了转换。

我改变了：

*:link, *:visited, *:hover, *:active, *:focus {

到

a:link, a:visited, a:hover, a:active, a:focus, [...Other elements...] {

因此它更具针对性。否则，当您移动鼠标时，会触发悬停状态，导致浏览器必须检查转换。

Answer 2

任何类型的动画都会增加图形系统的负担，但是如果你将CSS过渡和Flash等插件结合起来会使负载变得更糟（因为这些层必须结合起来）。你的flash wmode是否设置为透明？如果是这样尝试使用opaque，因为这会阻止flash动画关注下面发生的事情（从技术上讲，它会成为视频驱动程序中的叠加层）。

CSS3过渡是否会减慢网站的速度？

2 个答案: