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.
For this challenge, I'd like to see you try adding a third animation to the chained animations we've already been working on. You can start from the files you had at the end of the last tutorial, or you can find the same starting files in the Challenge folder for this chapter. Your third animation can be just about anything. You can change the opacity, maybe shift the position, anything goes as long as it's a third animation to extend the effect. A couple of tips while you work on this challenge, remember to use commas to separate the properties for multiple animations and make sure you add an animation-delay to your third animation so that it plays last in the chain of animations.
This challenge should take you around 10 minutes or so, depending on how much time you want to spend refining or adjusting your final animation. When you've got one you're happy with, check back to see the Solution file and see what I came up with.
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.