CSS Animated Grid Exercise

[00:00:00]
>> There's Pluto and the other Pluto, okay? You can do this with grid cells and you can do this with animation, with CSS animation, okay? So what you're gonna do here in this particular code pen challenge, you are gonna, I've given you a beginning code pen and I've given you two images, I've given you Pluto and I've given you Pluto squared, okay?

[00:00:23]
So what I would like for you to do, is to put the two images on top of each other and then we can use CSS animation to fade the top image, which is probably the one with Pluto on it, the dog. You can fade it in and out in order to make it appear and disappear.

[00:00:42]
Feel free to Google, okay? For how you might make an edit, it's a very simple animation, make one image appear and disappear, okay? I'll just show you the closing code pen here. But this is what you're gonna try to achieve with two images, Grid, and CSS animation, okay?

[00:01:08]
All right, well, let's go through how we might make this magic happen. So, here's the ending code pen here. And what I've got here in the ending code pen, it's pretty simple, I just have a div with a class of Pluto, and then I have my two images, Pluto 1 and Pluto 2, okay?

[00:01:28]
And then in my CSS, we have our Pluto display grid, one column, one row, yeah? And then the first child and the last child, both of those images, we want them displaying in exactly the same place, grid column of 1, 2, and a grid row of 1, 2.

[00:01:45]
We want them to display exactly together on top of each other. And then for the last child, what we're going to do is an animation thing. So you can look up the CSS Animation course here at Frontend masters, but this is a really simple one. So, the animation property takes a named animation, I guess, that key frames thing there, I've just said, go from the opacity of 0 to the opacity of 1.

[00:02:13]
You can make these key frame animations much more complicated than that, and include timing and all the rest of it. I just went with the super simple, and I gave it the name of pluto-Fade. So then you call pluto-Fade inside of the animation property, which is shorthand for a whole bunch of different animation properties.

[00:02:30]
So we've called the key frames for pluto-Fade, we said, make it happen over three seconds. Why? Because that's what looked good to me. We want it to go on infinitely, never stop, and we want it to alternate. So in other words, we want the image to fade in, then we want it to fade out, then we want it to fade in.

[00:02:46]
Otherwise what will happen is, it'll jump back to the beginning and it'll look very, very choppy. So by going in and out like this, alternating, you wind up with that smooth animation of the Pluto the dog animating in over Pluto the moon. By the way, I can't take credit for any of this, when they took the pictures of Pluto back, I think it was 2017, this meme went around on the internet, which I of course saved because I thought it was hilarious.

[00:03:15]
And it occurred to me that this would be just a fun little animation thrown in here for this course. So that's how it happened to come into being.