Question

I have currently added the CSS3 transition to my website.
I’m not shure if it is possible, that it slows down my website, but everything seems flickering and there’s this “jerky behaviour” on the transitions and flash videos.

I’m using Mozilla Firefox 10.0.02.

I added following to my CSS stylesheet:

*: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;
}

Can you tell me if it’s rather my browser being slow or if it is the CSS I added and if, then what’s the evidence?

Thank you!

Answer 1

That’s because you’ve added transitions to everything on those states.

I’d change:

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

to

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

So it’s more targetted. Otherwise when you move the mouse around, the hover state is triggered, causing the browser to have to check for a transition.