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
We'll be animating the other two parts of our infographic in this tutorial. We'll be doing the animations for our VS circle, as well the circles representing our data. Our VS circle drops in with a hard bounce when we make a new coffee selection, and our data circles do a sort of less severe drop in when they first appear on the page. So let's get started writing each of these animations. We'll head over to our CSS in Coda, back to our little block of animations that we've set up, and we'll start writing some new keyframes for these two animations. Let's start with the VS circle first.
So we'll start our keyframe block, and I'm going to call this one bounce-in because that's very much what it's about to do. What we want to have happen is we want our VS circle to drop-in from pretty far above. We want it to fall to some position passed its intended position, then bounce up just a little bit and then fall down just a bit to its final intended position. We'll start with our 0% keyframe, and we're going to have this start very high. So we'll add a transform that translates our VS circle up pretty high, and I'm going to go with -500 pixels.
This is going to be a negative number, because we're moving upwards, and there has to be a negative value on our Y axis. Then for its first drop, maybe we'll pick 70%. We'll set another transform and have this fall passed its intended position, so we'll say 30 pixels. That will be a bit further than it's really going to end up, and then at 80% because these bounces are getting smaller, we'll add a transform that translates our VS circle just up about 10 pixels, so that will be a small bounce up, and then finally, at 100% we will add transform that translates our VS circle to 0, which is essentially the exact position it already has styles for.
So those keyframes will create our bounce effect, but I want to add just a little extra touch to this effect. So I'm going to add just a bit more space here, and I'm going to add a property to a few of our keyframes, starting with our 0% keyframe. Though a bounce-in is pretty nice, but personally, I prefer when a bounce-in also is accompanied with a slight change in opacity. So I'm going to start our VS circle being transparent and set our opacity to 0. So at the start of its bounce-in when it's making its longest fall, it will actually be transparent at the beginning. And then down here at 80%, I'm going to set the opacity to 1, and that will have it be completely opaque.
So in between 0% and 80% keyframe, our VS circle will both be changing its opacity and its position. So we'll have a nice fade-in while we're doing our bounce-in, and it makes for a nice touch to that effect. We have one last animation we need to write, and that's the drop-in animation for our circles. So, we'll start a new keyframes block, and I'm going to call this animation drop-in because that's what they're doing. Now for this drop-in, we want a movement that's less severe than our bounce-in and really we just want our circles to start a little higher up than their final position and just have one movement down.
There's no bouncing involved. So because we only need two positions, we can use the keywords of from and to, to define our keyframes. And from keyframe I'll set a transform, but I'll translate our data circles up just a tiny bit, probably about 30 pixels up from their intended position. And in our to keyframe, I'll do another transform that will translate our circles to 0, so back to their original position. Just like our bounce-in animation, I'd like to add a little opacity to this one as well.
We'll assign the animation of drop-in. We'll add an animation duration of 0.25 seconds, which is pretty fast, but they're very small and they don't have far to go. We'll have an animation-timing-function of ease-out, and I'm going to set an animation delay of 0.5 seconds. Now you might have noticed that's the exact same amount of time as our VS circle duration was. So I'm going to have this animation start for all the data circles roughly right after the VS circle has ended. This timing might not be exact, but it's going to be pretty close.