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.
The main function we need to be concerned about is this one right here. This function will run anytime an item in our nav is clicked. The bulk of these functions that's already in place deals with making sure the right selection is made and changing things the right color. But we want to add something right at the very end. In our CSS, we created a class called bounce-in, and we assigned the properties of the animation that we wanted our VS circle to have to that class. So what we're going to do to trigger that animation to start is actually assign that bounce-in class to our VS circle when anything in our navigation is clicked.
By assigning that bounce-in class which has all our animation properties to a new element, the animation would immediately execute. So it's one line, but it's very powerful. We can leave this exactly as it is if we only wanted to trigger this animation once. This is exactly what we would need if that's all we were doing. But we've made it a little bit harder on ourselves, and we want to trigger this animation over and over, which means at some point we're also going to have to remove this class, because the animation will only be triggered the first time the class is added. So the question there is how do we know when the animation is done? Because obviously we don't want to remove the class until the animation has finished running.
If we removed it halfway through, the animation would abruptly stop, and that's no good. Lucky for us, browsers automatically broadcast an event when a CSS animation ends. And we can actually listen for these events and do something with them. So in order to do that, I'm going to do this outside of our click function because we only want to set up our listening for this event once. We don't want to keep setting it up every time something is clicked. So we'll move just a little further down on our file outside of that click function. And then to listen for that event, we'll again address our VS circle. We'll be listening for the event of webkitAnimationEnd, and when that event happens, we'll be executing a function.
Within that function, we're going to do one single thing, and that is to remove the class. So in order to remove the class, we'll use a jQuery function of removeClass, which as you can probably imagine, removes the class from an element and the class we'll be removing is bounce-in. So what this little block of code means is that when the webkitAnimationEnd event occurs, we will remove the class of bounce-in from our VS circle, which means it will be ready to be reapplied next time we click on something. These events are very handy, but there's currently one major drawback. Each browser vendor uses a slightly different name for the event.
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.