Exploring browser animation options: Part one, CSS3

Published by | Saturday, September 8th, 2012

There are lots of ways to get animations to play in modern browsers. With so many options, it can be tough to determine the best way to tackle a specific project. Should you use CSS3? Is it better to use jQuery? What about Canvas or Canvas based libraries like Easel.js? In this series of articles, I’ll compare and contrast some of the different technologies behind web animations, show how to code sample animations, and note advantages and disadvantages behind each. We’ll get started with CSS3 animations.

CSS3 Animations

First and by far the easiest way to move things in a browser is to animate DOM (Document Object Model) elements using CSS3. On some platforms the animations are GPU (Graphics Processing Unit) accelerated, which makes then faster, especially when animating 3D transitions on mobile devices. Because the animations are done with CSS, no JavaScript is required, although you can still use it to add interactivity to your animations.

Demo

CSS3 Animation Example

Note: I added a button and a bit of jQuery to the example above so you can start and stop the animation in the JSBin example above. I’m just discussing the essentials of the animation without those elements below. I’m using -webkit prefixes here for brevity, so this example is only going to work in WebKit browsers like Safari or Chrome.
. If you want to be compatible with more browsers, make sure you add the other prefixes. Check out CSS3 Please for more info.

Let’s take a look at how these are done. We’ll start off by creating an IMG tag and pointing that to a small photo. We’ll add the startspin class so we can target it with CSS later.

<img id="startspin" src="http://i.imgur.com/n3Uvf.png" />

Then, it’s time to add some CSS to animate this. CSS animations are done in two parts, first of which is creating a series of keyframes, much like what you would do with any timeline-based program like Adobe Edge or After Effects. Let’s create the keyframes:

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(-360deg) scale(1.5);
        opacity: 0;
    }
    50% {
        -webkit-transform: rotate(30deg) scale(.8);
    }
}

We can use a percentage with different values to indicate at what point in the time our elements (in this case the IMG) should transform (0% and 50%). Inside curly brackets, we then we can use transform attributes to modify our element. In the example above, I rotate the object and scale it. I’m also adjusting the opacity as a separate property/value pair. You can use different transformations like this.

Notice that you don’t need to include a keyframe for 100%. The object will animate from the transformation at 50% to whatever the image is supposed to look like when it has no transformations.

Once you have a series of keyframes, it’s time to assign these to a CSS class or an ID. So you can attach the animation to an element in the DOM (in our case, an image), plus control how the animation plays.

.startspin {
        -webkit-animation: spin 2000ms ease-in-out;
}

This adds the animation to the startspin class, which we attached to the image tag already, so the animation will execute when the image loads.

The animation property is a shorthand for six of CSS3′s animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. You can pass a number of options to the property, and in my example, I’ve specified that this animation will be using our spin keyframes, that the animation will last 2000 milliseconds (you can use s instead if you want to specify seconds) and that it will be using an easing function called ease-in-out that will make it animate slowly at the beginning and at the end. If you’ve worked with animation in other software, these should be pretty easy to pick up. Otherwise, check the CSS3 animation documentation.

Another example

CSS3 Animation Example

In this example, I’m using JavaScript to control what happens when someone clicks on the image, which causes a second set of keyframes named pulse to take over the animation. You can use the keyword infinite to have an animation play repeatedly forever (which might get obnoxious quickly, so use with caution), or simply specify a number of times you want the animation to play.

Limited primitives

Unfortunately for CSS3, there are very few graphic primitives (native ways to draw shapes) in the language. You can create a box, or if you make a box have 50% borders a simple ellipse, but that’s pretty much it, so you wouldn’t want to build a game with CSS animations. However, you can bring in any type of graphic your browser will accept like SVG, JPG, and PNG files and they will animate fine with CSS.

Vendor prefixes

One of the huge disadvantages, and, frankly, the Achilles heel to working with CSS3 animations, is that in order to get CSS to work with as many browsers as possible, we should include vendor prefixes like -webkit (safari and chrome), -moz (Firefox), -o (Opera) and of course the property without the prefix. This is a huge problem because animations use a large number of property combinations that all need prefixes. If you take a look at just transforming an object by 30 degrees, here’s the code you’d need for that.

-webkit-transform: rotate(30deg);  /* Safari 3.1+, Chrome 
-moz-transform: rotate(30deg);  /* Firefox 3.5-15 
-ms-transform: rotate(30deg);  /* IE9+ 
-o-transform: rotate(30deg);  /* Opera 10.5-12.00 
transform: rotate(30deg);  /* Firefox 16+, Opera 12.50+

And that’s just one property. Not taking into account what you have to do to create your keyfames, which for a simple fade would look something like this:

@-webkit-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}
@-moz-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}
@-o-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}
@keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
}

To expect someone to do a complex animation using all of the prefixes is unreasonable, and that’s why most of the examples you’ll see online use -webkit prefixes, target a specific browser or are done by super hardcore coders. There are some JavaScript frameworks Like Lea Verou’s Prefix Free that can help with this, but I don’t foresee a lot of people using CSS3 animations as their primary animation method until years from now—if ever. There are just easier and better ways.

Progressive Degradation & Compatibility

Whenever you work with any CSS3 properties, you should check browser compatibility and make sure that whatever code you end up using isn’t essential to the functionality of your website. Users with older browsers shouldn’t still be able to use and view your site even though they might not get all of the animation sugar.

Here’s a compatibility table from Can I Use:

If you want to learn more about CSS animations, I’d suggest watching my course IOS Web Applications with HTML5 and CSS3.

Share this:Share on Facebook3Tweet about this on Twitter11Share on Google+3Pin on Pinterest0Share on LinkedIn0

lynda.com - start learning today

Tags: ,


2 Responses to “Exploring browser animation options: Part one, CSS3”

  1. Amos says:

    Useful information. Thanks a lot.

  2. JHawes says:

    Very nice – with all the awesome CSS3 & HTML5 effects being more and more adapted by all browsers its nice to get more of these tutorials. Keep up the theme!

Leave a Reply