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've been working on our unicycle rider animation, and so far it only has a starting point and an ending point for the animation. For a nice follow-up challenge, let's add some additional keyframes to the animation we've been working on to make this unicycle riding act just a little more complex. You can use the files that we've already been working with, or you can use the starter files I provided in the challenge folder. Remember, keyframes can be defined with percentages, as well as keywords like from and to. Using percentages fits better with multi-keyframe animations, which is what you are going to want to create here.
So the objectives for this challenge are: to define the animation keyframes in percentages, to make the unicycle move in more than one direction, and to make the animation repeat at least twice. This is a nice short challenge, and you should spend about 10 minutes or so adjusting your animation. Then come back and check out the solution to see what I made.
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.