Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding delay and fill-mode
- Dictating an animation's direction
- Using easing
- Adding keyframes
- Looping an animation
- Chaining multiple animations on one element
- Setting up the HTML structure
Skill Level Intermediate
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.