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!
