Infinitely looping animations - CSS Tutorial

- [Instructor] Let's look at creating infinitely looping animations. CSS is great for this type of animation because of how easily we can set an animation on an infinite loop. We'll be creating a couple of animated clouds that will drift across the sky in Binaryville just like we see here. Both our Binaryville logo and the clouds are images. And in our HTML, we have both the cloud images and the Binaryville images, and we've set them in different divs so we can absolutely position the clouds behind the Binaryville scene. In our CSS, we have rules to set that positioning and we can start to add some animation too. So I'm going to start by adding there at key frames block. And I know we want to have our clouds move from all the way off to the left where we can't see them to somewhere off to the right where they're out of view. So I'm going to start our key frames block and call it float. Then on our 0% key frame, I'm going to add a transform of a translation on the X axis of negative 150 pixels. And I know from looking at my image files, that that will move our clouds all the way off to the left where we can't see them. And then for our 100% key frame, I'm going to move them all the way over to the right, or at least as far as they need to go to not be in view anymore. That'll be a translation on the X axis of 820 pixels. Normally it might take some trial and error to get these numbers right, but I figured them out ahead of time to save us some time here. So now that we have our key frames written, we can assign them to our two different clouds. Our first cloud has a class of cloud01, and we'll assign that cloud this float animation. So we'll use the shorthand. So that's going to be animation and we'll give it the animation name of float. I'm going to give it a long duration of 25 seconds because this float is going to be fairly slow. It's just kind of an ambient cloud situation. I'm going to give it the easing or timing function of linear, just to keep this drift simple. And we're going to have it repeat infinitely. Our second cloud is cloud02 and we're going to assign it that same set of key frames, the float key frames, but we're going to change things up just a little bit so they'll be moving at slightly different speeds and won't loop exactly the same way over and over. So first I'll assign it that float animation again, but I'll give it a longer duration so it's moving at a different speed than cloud one. I'll give it a duration of 30 seconds. And I'll also add a delay in our animation shorthand, the second number with time associated with it will be the animation delay so they don't start at exactly the same time, just offset their movement a little bit. I'll also give this one the easing of linear for the same reason as the first and give it the animation iteration count of infinite so that is looping infinitely. The difference in speed and the offset and timing will help make the clouds look slightly different each time they pass through our view and make the looping effect more interesting. One last thing we'll add to cloud two is the animation film mode of backwards. And this will ensure that we don't see cloud two hanging out in its intrinsic position before the key frames take place during that five second delay. If we save this and preview our animation now, our two clouds float through Binaryville and behave just a little bit differently despite the fact that they're using the exact same key frames. We've also used the different durations and the offset in time with the delay to create a little bit of difference each time they come through the scene. Being able to reuse animations on multiple elements like this is a nice feature of CSS animations. Animating multiple elements with the same key frames, but slightly different properties is a great way to get extra mileage out of your key frame animations. You can create all sorts of different effects without ever needing to edit a single key frame at all.