performancecsscss-transitionstransition

Do CSS3 transitions slow down websites?

I added a CSS3 transition to my website. Everything seems flickering and there's this "jerky behaviour" on the transitions and flash videos on Mozilla Firefox 10.0.02.

CSS stylesheet snippet:

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

Is my browser slow or is it the CSS I added? (I'm seeking evidence)

Solution

  • 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.