Viewers: in countries Watching now:
This course presents a short series of CSS animation techniques, such as looping, playing, and pausing, and puts them together in a small project: an animated infographic. Author Val Head also addresses using CSS preprocessors, adding transitions, handling vendor prefixes, and understanding the best uses for CSS animations. Plus, discover how to measure the performance and current level of browser support for CSS animations and how we can expect the technology to change.
This happens because the bulk of the work for rendering a CSS animation is handled by the browser internally, which allows for some increased efficiency. If you're animating with transforms, as we often have throughout this course, your CSS animations can also benefit from hardware acceleration. This means they'll be rendered on a different internal layer by the browser. If you're interested in reading more about CSS animation performance versus jQuery performance, I'd recommend checking out this article by Chris Mills on the Opera Dev site. He goes into a lot more detail and how he tested this and the results that he got.
Personally, the biggest advantage I see for CSS animations is how easily available they are. There's no plug-ins or libraries to install before you can start working with motion. You can just jump right in with the technology you're already using, HTML and CSS. This greatly lowers the barrier to adding compelling bits of motion to your project. This also makes it easy to add just a little bit of motion without having to go all out crazy. These are some compelling advantages for sure, but how do you decide if CSS animations are appropriate for your current project, especially when it comes to client work? There are two main factors I take into consideration when deciding if CSS animations are right for a particular project.
The first is how critical the content included in or conveyed by the animation is? The second is which browsers the audiences for this project are most likely to be using? Let's talk about each of this in just a little more detail. The best test for deciding if your animation is critical is to ask yourself if the page or screen in question will still make sense without the animation. For example, an animation that demonstrates a particular software feature would be critical to someone's understanding. Whereas, an animation designed to call a little bit of extra attention to a button on the page may not be so critical.
Next, consider the browsers that will likely be used by your audience. The easiest way to do this is to look at the browser statistics for the current site and compare that to a site like caniuse.com that charts browser support for CSS animations. If there are a large percentage of visitors using older browsers, like IE9, for example, which we see here has 0 support for animations, there is a good chance that a lot of your visitors won't see your CSS animations due to lack of browser support. If your animations are critical, using CSS animations in this case would not be the best idea.
This fills with the concept of progressive enhancement, providing an enhanced experience for more capable browsers, but making sure that the less capable browsers still have all the necessary and required content. If you'd like to learn more about the concept of progressive enhancement, I'd highly recommend this article on A List Apart, by Aaron Gustafson. He goes into a lot of detail of the concept behind it and uses a lot of really great metaphors and illustrations. One last consideration when deciding whether or not to use CSS animations in a project is mobile browsers.
The range of mobile browsers out there today makes for a very interesting landscape. Many of these mobile browsers, mobile safari for example, handles CSS animations nearly perfectly. But there are some very interesting quirks out there in mobile browsers, which maybe only partially supports CSS animations, and that happens a lot especially in the Android Market. It's impossible to go over every possible device and browser combination here, but if you happened to be targeting a specific device or browser version with your project, it's best to start testing early and often to be sure it has the support you need.
If I could sum up all my advice on this topic in just one thing, I would say to always consider your audience first and go with your gut on what makes the most sense for them. There are plenty of opportunities to use CSS animations to enhance the interactions of your site or web app and the opportunities are only going to increase in a not so distant future. As long as you're sure to consider the goals of your audience, you'll be off to a great start adding CSS animations to your work.
There are currently no FAQs about CSS: Animations.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.