CSS transition class

This fun little class will add a 0.3 second transition between an element's normal and :hover states. Breaking it out into it's own class saves a lot of repetition in CSS and makes it easy to slap onto almost any html 'class' attribute.

.transition {
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

If you define an element like this:

#box {
     background-color: #999999;
}
#box:hover {
     background-color: #000000;
}

And in the HTML:

<div id="box">I'm a box!</div>

It will simply flicker gray to black when hovered.

If you add the 'transition' class:

<div id="box" class="transition">I'm a box!</div>

Now it will animate a gray->black animation for 0.3 seconds!