CSS3的过渡会减慢网站的速度吗

Question

我目前已将CSS3转换添加到我的网站中。如果可能的话，我并不担心它会减慢我的网站速度，但一切似乎都在闪烁，在过渡和闪光视频上有这种"不稳定的行为"。

我使用的是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设置为透明吗？如果是这样，请尝试使用不透明，因为这将阻止flash动画关心下面发生的事情（从技术上讲，它会成为视频驱动程序中的覆盖）。