CSS3 transition class

As CSS3 continues its tentative march towards widespread implementation, I’ve noticed a slightly disturbing implementation of the new transition property popping up with alarming frequency. For once, my problem isn’t with the browser-specific hacks that these techniques currently rely on. Transitions actually come prepackaged with an extremely reliable fallback mechanism in that any lacking support for the transition property will simply end up switching from the starting state of the transition to its end. My real problem is with the surprising number of transitions that are created with redundant and unnecessary code in situations that don’t really need it. For example, consider the following:

a:link,
a:visited {
    color:#000;

    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -ms-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out; 
    transition: color 0.3s ease-out;
}

a:hover {
    color:#f60;

    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -ms-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
}

CSS was designed to increase maintainability and decrease development time by making documents’ appearance independent of content. And unless you need exquisite control over each property of an animation, writing out a separate transition for each animated element on the page isn’t particularly efficient or maintainable. If you can live with constant timing and easing throughout the animation, you can save a few keystrokes and more than a little HTTP traffic by replacing the original transition with a general-purpose animation class:

.animated {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

The transition-enhanced link show above would now simply be created by defining the beginning and end states of the transition:

a:link,
a:visited {
    color:#000;
}

a:hover {
    color:#f60;
}

and implementing the link with the animate class set:

<a href="#path/to/something" class="animate">A link in transition</a>

There are countless situations that might require more control over timing than a single generic class can provide, but many—very many—don’t. For these, there’s no reason to overdo it. Your time is precious. The internet is full enough. So get in there, define that class, and move on to other things.