Border-width animation fun
Of course you know about the css3 transition property. But did you know it works on borders too?
These are some fancy effects you can create by transitioning the borders.
Examples
How does it work?
The clue is to cover the element by adding a border with half the width of the element, add
box-sizing: border-box so the border actually covers the element and transition the
border on :hover to a much smaller width. For extra effect you can use RGBA colors with
different transparency settings.
Play around
We've prepared a jsFiddle with all the example code above so you can go ahead and play around with it: http://jsfiddle.net/WaGbr/.
A word on compatibility
We've tested these on Safari 5.1, Chrome and Firefox 8.0.
These effects will only work on browsers that support border-box. The transitions won't work
if they aren't supported but will degrade gracefully. There are some browser inconsitencies between the browsers that
do support these features: Firefox for instance won't transition a dotted border but replaces it with a solid one.
Show us the source!
Feel free to look around the different source files we used for this example.
