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.
You'll be seeing a lot of vendor prefixes in the exercises for this course. So let's take a minute to talk about what they're for and how I'll be using them in this course. Vendor prefixes are a way for browsers to support features before the spec for that feature has been finalized. Sometimes the early implementation of a feature is different from the final version, or the feature is only partially implemented early on. Prefixes are a way to let us know that features may not be 100% complete yet. They're also there to help us work around any slight differences in implementation from one browser to another while the feature is being finalized.
Vendor prefixes are often hotly debated in the industry. Love them or hate them, they are a necessary evil of authoring quality CSS that will work across multiple browsers. At the time of this recording, the most recent versions of Firefox, Opera, and IE support CSS animations without prefixes. However, slightly older versions of these browsers, even ones from just a few months ago, still require prefixes for animation support. In all of the examples, you'll see me starting out with only the WebKit version of the animation properties while I'm working on things and getting them where I want them.
By the final version I will always include all of my vendor prefixes. I'll write out the prefixes in the same order each time starting with the WebKit prefix version for WebKit browsers, then the moz prefix for Mozilla, the O for Opera, and finally the unprefixed property. The unprefixed property should always be included last so that their final implementation will override any experimental implementation. Thanks to the cascading nature of CSS, the last interpretable property listed will be the one used by the browser. All these prefixes certainly look like a lot to type. To help you with that, especially if you're writing the note by hand, I've included a snippet text file along with the exercise files for this course.
Each animation property you'll use will need to be prefixed. Your keyframe rules also need to be prefixed. So you'll end up with a long list of keyframe rules like this. Your unprefixed rules should always come last to keep your code nicely future-proof. As each browser vendor finalizes its implementation of the animation spec, they will move towards supporting the unprefixed version. I'll also be using some other newer CSS properties like transforms, and these will also require prefixes. So get ready to see a whole lot of prefixes, but don't worry, I promise to make things fun.
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.