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 here's what I came up with for this challenge. I'll just refresh the page to show you. I added a third animation that's just a little bit of a bounce to the end of our chain. So let's go to Coda and look at the HTML behind my solution. So I added a third animation named bounce, and I just created a bit of a snappy bounce effect translating on the Y axis. To create this bounce effect, I just created a few keyframes translating along the Y axis to get an up and down bounce. I started out with the 0% keyframe with no translation at all so we could start kind of from a blank slate.
At 70%, I translated up just a little bit. And then at 80%, I made a big jump so that 10% jump is pretty big, and it moves pretty fast. Then at my 100% keyframe, I put everything back to a translation of zero. If we scroll up to where I added my properties, on our mol class I added the animation-name of bounce to our comma separated values for all the animation names. In animation-duration, I had it last 0.5 seconds, and you'll notice it's last on the list with the comma again. The only kind of trick I guess to this solution is to make sure that the last animation-delay I added was equal to the duration of the last two animations.
So you'll see I added the delay of 1.75 seconds, which is exactly the combined duration of the roll-in and scale-up animations which were 1 second and 0.75 seconds, respectively. So that's my solution, and I hope you came up with something fun for your solution too. I hope you also remembered to include all your vendor prefixes if you're planning to use this in any kind of a production environment. This is another challenge for which there was no real correct answer. The more you explore how to make things move with CSS and to make your ideas come to life, the more interesting effects you'll be able to come 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.