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.
So let's take a look what I came up with for this challenge. I have our unicycle rider going back and forth a little bit at the start, then going off to the right, and going back and forth a little bit and then completing his routine. So, let's hop over to the CSS to see how I created this. I made some adjustment to our rider animation and added a few more keyframes. I started out with our 0% keyframe of translating nothing, so he starts out in his original position. Then at 20% I moved our unicycle rider over just a bit to the right, at 35% a little ways back to the left, and then at 85% I moved him pretty much the entire way over to the right.
And at 100% I moved him ever so slightly over to the left. So that's how I got that kind of back and forth motion. And these percentages are numbers I just kind of came up with based on what looked right. There's no real science or math behind them. It was just some adjustments here and there to get a good look for the animation. And in our animation properties, I kept the same animation name, made the duration just a bit longer to 4 seconds to give him a little bit more of a leisurely pace. My animation iteration count is 2, so we could do the forwards and backwards alternating motion. And I also set my animation direction to alternate and my fill mode to forwards, so our unicycle rider would stay in position at the end of the animation.
So, that's what I came up with. Hopefully you came up with something fun, too, for your solution.
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.