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.
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
:hover to a much smaller width. For extra effect you can use RGBA colors with
different transparency settings.
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.