Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Ray Villalobos | Friday, September 07, 2012

Exploring browser animation options: Part one, CSS3

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.

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.