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.
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.
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.