FerretArmy.com: CSS Animation Tutorial

CSS animation is, not surprisingly, HTML DOM animation that is handled at the CSS level. CSS animation technology was developed by the webkit team, and currently is implemented in webkit-based browsers.

The CSS animation specification is a work in progress, but support for the technology is already available on many platform (most notably the iPhone through Safari Mobile, and in the Safari and Chrome web browsers). Obviously, these segments constitute a fraction of overall web traffic, so any website that uses CSS animations should be using them in a progressive way, where the site gets some benefit if the user's browser can render CSS animations, but the overall experience won't be hampered by the browser not being able to display them. In this tutorial, we'll go over a few techniques that fit into this category.

One of the easiest and most useful techniques is to use scale on hover. This is an effect that can be achieved with as little as two lines of code. In order to get a scale effect, you first apply a transition to an HTML element via CSS, which specifies the type of property to animate, the speed of the animation, and the easing option available, as can be seen below.

.demo-button { -webkit-transition: -webkit-transform .2s ease-in-out; }

The above line states that any element with class 'demo-button' that also has a 'transform' property (prefixed by -webkit, since CSS animation tags are only available in webkit browsers) should animate this property in .2 seconds, and it's easing function is ease-in-out. This line itself doesn't do anything, it's just setting up the animation.

.demo-button:hover { -webkit-transform: scale(1.5); }

The above CSS rule is applied on hover over our 'demo-button' elements, and basically says to scale the element to 150% of it's normal size. You can see the results by clicking on the image above to go to a demo.

We have a scale transform associated with the button above, but maybe we're looking for a more dramatic effect. Let's add a few more effects to it that will work along with the scale transition. The first thing we want to do is to change our transition effect. Transition effects are stackable - you can define multiple properties with multiple different transition timings/easing functions, but we'll take an easier path.

.demo-button {
	border: 1px solid #000; -webkit-border-radius: 4px; padding: 5px;
	-webkit-transition: all .4s ease-in-out; -webkit-transform-origin-x: 0px;
	background-color: Blue; color: #fff;
}

What we've essentially done above is to allow all properties to be animated on our 'demo-button' elements. Now, let's add a color change to the mix as well, and let's make some additional changes to control the origin of our scale transform. You'll notice how the button grows only to the right on this demo, because the x-origin of the scale was moved over to the left hand side of the button using the -webkit-transform-origin-x property.

.demo-button:hover { -webkit-transform: scale(2); background-color: Red; }

Unsurprisingly, it is very easy to tie an animation to an event via simple Javascript. This is a trivial example, where we want to include a button that will allow highlighting of text. From above, we already know how to apply a color transition to a field, all we really need to do is to kick it off using Javascript. Here is the CSS we need:

.toHighlight { background-color: transparent; -webkit-transition: all .2s ease-in-out; }
.highlighted { background-color: Yellow; }

Now, let's write a simple Javascript function to work with this. The following snippet uses the jQuery javascript framework.

$(function() {
	$('#highlightButton').click(function() {
		var toHighlight = $('.toHighlight:not(highlighted)');
		var highlighted = $('.highlighted');
		toHighlight.addClass('highlighted'); highlighted.removeClass('highlighted');
	});
});

Now, given a text blob and a button like below, when the button is clicked, the CSS change will include the transition effect. Note that this effect highlights text in all browsers successfully, but in webkit browsers, we get a more interesting effect.

<p>This is a text blob, and
		<span class="toHighlight">this text will highlight</span>
	with the press of a button.</p>
<button id="highlightButton">Highlight!</button>

Check out this demo in action!

There's a lot more to CSS animations. This tutorial has focused more on functionality that is progressive, but the reality is that currently the bulk of CSS Animation effects are not going to be able to be used in a progressive fashion due to compatability issues. Hopefully, these issues will be resolved in the future so that we can use CSS animation to much cooler effect on the web of tomorrow.

Check out some of my other work on CSS Animations

• CSS Animations and the jQuery UI Framework
• Some CSS Animation Examples
• Some More CSS Animation Examples