Endigo Design

Introduction

If your viewing my site using a Webkit based browser such as Google Chrome or Apple Safari you may have noticed the subtle animated glow effect I use on the borders image links when you hover over them. Here’s a couple screenshots showing the effect:

I have accomplished this using the awesome @-webkit-keyframes tag being introduced in the CSS3 spec. Anyone that has ever created an animated gif or used programs like Adobe Flash will immediately understand the advantage keyframes bring to animation by allowing multiple stages of changes within a set amount of time.

Getting Started

Here is what it looks like in practice, please note the comments.

.gallery li div:hover {
	/* Give your animation a custom name */
	-webkit-animation-name: border-animation;

	/* Set the duration, s = seconds */
	-webkit-animation-duration: 2s;

	/* How many times the animation to repeat */
	-webkit-animation-iteration-count: infinite;

	/* Several options available, use linear for this example */
	-webkit-animation-timing-function: linear;
}
/* This is the keyframe tag + custom animation name (assigned above) */
@-webkit-keyframes border-animation {
	/* Below are when each frame takes place, 50% of a 2 second duration would be 1 second or half way through the animation. */
	0% {border: 5px solid #e7eeed;}
	50% {
		border: 5px dashed #fff9b2;
		-webkit-box-shadow: 0px 0px 12px #fff9b2;
		-moz-box-shadow: 0px 0px 12px #fff9b2;
		box-shadow: 0px 0px 12px #fff9b2;
 	}
	100% {border: 5px solid #e7eeed;}
} /* <--- Small syntax highlighting error here */

So here’s what my custom border-animation effect does: It has the typical 5px sized light blue border, then when moused over for 1 second (50% of a 2 second duration) fades to a light yellow border with a slight CSS3 box shadow which appears as a glow effect, finally one second later returns to it’s original state. As long as you hover over the selected elements the effect will repeat forever.

Final Thoughts

One final note I might point out you will notice from my code above. Most IDE’s with syntax highlighting do not yet recognize the extra curly brackets needed for the @-webkit-keyframes tag when specifying your keyframes. In Dreamweaver for example the last curly bracket is shown in a red color rather then the normal pink. See an example below:

For now it helps to add a comment to help remind yourself that this is intentional, I am sure this would most likely return an error if you tried to validate your code but that’s part of the game when your working with bleeding edge code specs!

Additional Notes: You can view some details about CSS3 animation with the Webkit.org CSS3 Animation Guide. For the time being I am focusing on Webkit’s implementation of this effect using the proprietary -webkit- at the beginning of the tag since it is the only browser to my knowledge that can use the tag at the time of publishing this article. Opera is starting to support basic animations using -o- and Mozilla will soon start supporting animations using -moz- with their upcoming 3.7 release of Firefox. Microsoft is pushing for greater support of standards with their Internet Explorer 9 which may or may not include animation support.