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.
In this chapter we're going to be building an animated and interactive infographic to put some of our CSS animation knowledge into practice. I've designed a little infographic comparing a few different types of Espresso Drinks and what's in them. The graphic compares the espresso, milk, and other contents of each drink. Let's take a look at how the infographic works before we start peeking under the hood. At the top, we have a little animated header with our coffee cup sliding in and out. We also have a menu where we can select which drinks to compare. Each time we click a new drink, our versus circle comes bouncing in to really set off our battle.
The data circles for each drink are also animated in. You might have noticed that I'm running this example off a local host, and I'm also using some specialty fonts. These aren't necessary to use the example, I'm just a bit of a font snob, that I wanted to use my Typekit fonts for this example. However, if you run the files from our example just from your finder or right of your desktop as normal, you'll just see slightly different fonts. So this is what it would look like with the default browser fonts. Everything still works exactly the same. The type just looks a bit different. You can work with it either way, and you'll get the same functional results.
In the next two tutorials, we'll take a deeper look into how everything works.
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.