CSS Animations

[00:00:00]
>> Kevin Powell: The transitions are really nice for providing immediate feedback to the user. They hover at changes from one thing to another. We have a start point and endpoint, and we're just trying to go in between them, often based on things like pseudo-classes and other things that allow us to know how the user's interacting with things. Sometimes we want more control than that. We don't want a start point endpoint, we want 6 points along the way.

[00:00:21]
Or we might want to be introducing it in different ways. We might be firing an animation when the page loads, or we might want to add a class using JavaScript. When that class is added, an animation runs. So instead of using a transition where we're going between two things, we can use a CSS animation. CSS animations use something called at keyframe, so it's another at rule that we're using for this.

[00:00:45]
The keyframes need a name, so at keyframes, come in with a name, and then you come in with different stops along the way. So these are the keyframes I'm creating. My 0% keyframe, background color purple. At 25% of the way through, we're going to go to orange. 50% of the way, my background will change to Dodger blue, we can go all the way to cyan. Let's copy this and see what it does. So I have this code pen waiting right here.

[00:01:12]
Oh, I already had them in there, I didn't have to copy it. So you can see all of them in there right there, waiting to be used at keyframes, the name of the keyframe animation, and then the declaration of all of them right there. To be able to use it animation and then we come in, it's a little bit like a transition. The animation is also a shorthand for animation name is one of them. We're not doing the property because the properties are being controlled by the keyframes over here, so we don't have animation property.

[00:01:43]
We do have timing functions, we have the duration, we have delays, and a few other things as well. So animation, I need to provide a name, so we're going to do the animation name of color shift. It's not color shifting, because I haven't said how long it's going to take. Let's say it's going to take 10 seconds. So now we have a color shift going on. Cool. What's going to happen at the end is it's going to go back to the starting that it was before the animation started on, which, there we go.

[00:02:15]
Starts the animation, runs through the keyframes, they're finished, it goes, OK, I'm back to this background black cause the keyframes are finished now. The animation's done. To be able to handle that, there is the animation. I'm going to forget the name of it, but I know what the value is, and we'll see the name in a second, where I can write forwards here. Forwards means once you get to the end of the animation, stay at the last keyframe.

[00:02:42]
Very useful to have this one. So the whole animation runs through. It's done now, it's not shifting anymore and we're stuck at that last keyframe, so it doesn't go back to the black that we had originally, which is a little bit less jarring. It depends on your use case. A lot of the times you'll have backwards or forwards here. You can also use a both, and you can use a, there's a forward, a both, and a backwards as well.

[00:03:08]
It gets a little bit weird when you start using those other ones, but part of it has to do with how we're running the animations. Right now the animation's only happening once. I can say how many times do I want the animation to happen. We'll do that with the longhand. Animation iteration count. 3. Now the animation will happen 3 times. I'm going to make, I don't want it to be flashing around, but we'll just say 1 second to flash through them quickly, but we'll see that it's going to go through them fast.

[00:03:40]
And then eventually stop, but it did the whole animation 3 times, so you can choose how many times you want, including infinite. And maybe for that one we'll slow it down cause it's going to get kind of annoying. Did I spell that wrong? Infinite. Now it should work. And then I'll slow it down in a second, but that just means your animation, you know, we've got the disco party going on now. So we'll slow that down so it's a little bit less flashy, but then you can just say your animation never ends, it runs for infinite.

[00:04:10]
We actually have infinite as a value in other places in CSS now, which is interesting. Now one problem that's happening with this animation is as it's running, when it gets to the end of the animation, the keyframes I should say, it's going to automatically jump back to the purple because we're going from 0, 25, 50, 100, and then it instantly jumps back to the 0. So there is another property that we can use as this would be our animation.

[00:04:38]
Animation direction. So you can actually do this as a reverse, reverse, and it will just run the animation backwards instead of forwards. Maybe you have reasons you have an animation on one thing you needed to enter, using it as an exit on another one. Or you can do an alternate. So the alternate works when you have an animation that repeats more than once. When it gets to the end of the first round, instead of instantly jumping to zero, it just goes from 100 back towards the 0 keyframe.

[00:05:07]
And you gotta spell it right, cuz I think I broke it. Animation direction. Alternate. Oh, maybe it was running and it was just going slowly when I looked at the screen there. We'll move it, we'll let it go now. And we should see it gets into the blues, and yeah, this part was just going a little bit slow cause now it slowly starts shifting back into the blue instead of instantly jumping to the purple that we had before, and now we can see that it's starting to cycle back through and go a bit quicker through those other colors right there.

[00:05:33]
And we have all of these different properties that we can choose from when we're using animation, so there is a lot of control that we do have over them. The iteration count often is going to be a 1 or an infinite. It's rare that you have like 3 times, but you never know, you might want to run something a few times. The direction again, if you have running more than once can be really useful. An animation play state can also be useful.

[00:05:57]
You have a play, playing or paused. So if you have something you want to interrupt in animation, say someone hovers over something, you could actually have the animation pause, and when they move it back off, it starts playing again, or vice versa. They hover on top and it starts playing in animation, they remove the hover and it pauses the animation. So that's a kind of interesting one right there.

[00:06:18]
There's a lot to the world of animation. There's people that are very creative and do really crazy things with animation, but a lot of the time you generally want to stick to things that are relatively simple, because if you start bombarding the user with things, it can become a little bit much. So we can add in a little bit of a fade-in to our website just to make it a little bit more interesting when the page loads.

[00:06:41]
Let's jump back on over to the project. And we can create our keyframe animations. So you can declare these anywhere you want. I generally declare my keyframes where I'm going to be using them, so with the element that uses it, but keyframes can be used over and over and over again. So if it's something unique to one thing, I would plug it in, like keep it with that one declaration. If it's something that you're going to use all the time, you probably want to keep it with your general selectors closer to the top.

[00:07:06]
Or maybe you just keep it with your at rules or your font-face because it's an at rule. It's up to you how you'd like to organize yourself on that one. We'll come here. We're going to do a keyframes, so at keyframes, then you name it what you want, we'll call it fade in. And then you come in with the key frames you want. Interestingly enough, you don't have to provide the starting ones, you can just provide a finish state if you wanted to.

[00:07:37]
In this case, I think it'd be useful, but let's start, we'll do the transition first just to make this make sense. So we can say it's 0%. Are translate. Is going to be down, so I want 0 and then 100 pixels, just as a very basic start. And then we're not going to provide a 100%. I'm just going to put one single keyframe. It looks a little weird. We're going to change this to make it a bit more clear, but then let's do our whole body.

[00:08:04]
I wouldn't normally do this on the body, but just for this quick example, animation. Fade in 1 second. It's not even fading, it's moving right now, so it's not the greatest. But you can see it moves on up. The reason it's moving up is it's starting at this keyframe that I've created, and then it goes, well, I don't know what the ending is, so I'm just going to go to whatever that element normally is.

[00:08:24]
And normally there's no translate on that element, so it just goes back up to its natural resting place. This can be really useful because it means you can have elements that are. Sometimes you'll have it the other way around where it's 100% is always the same, but your starting point is different for them, and you don't have to define this, you have all these different animations, you just define the one point that's really important along the way.

[00:08:49]
Or you can do even a bounce. If this is a 50%, it's not a fade-in, it's going to be a bounce because it's going to go from where it was to the no location and then back to the natural resting state at the end. Yes. Is there a way to keep track of how much computation is happening because I know with animations, it can really start to bog things down and I don't know how we would track just how much is too much.

[00:09:16]
Um, so in general, if you're doing your translates, the transform properties rotate, transform scale, you're probably OK. Opacity as well. As soon as you start getting into the other ones, it can start being problematic, like you said. There is an obscure dev tool feature that actually shows you all the things that are being repainted when different things are happening on the page. So maybe after we could dive in and try and find it, but I don't even remember what it's called anymore, but there are a few things you can do to find that.

[00:09:46]
But a lot of the main way I do it is just lots of testing to see is this actually causing some jittering or some problems along the way. And John Cooperman has a Chrome dev tools course on the platform that he goes to the dev tools and shows the performance, performance panel performance monitor. I think it's the performance tab in the dev tools that you can track memory usage along the way. Awesome.

[00:10:14]
So for this one, again, I'm going to put this back to the 0, cause that makes sense at the 0. I'm also going to say at 0, then we're going to say, yeah, at 0, I also want the opacity of all of them, opacity to be 0 as well. And so it's going to fade in and out. Now it's actually really jarring when even the navigation's moving, so I wouldn't really put this on the body. So maybe we put this on the hero.

[00:10:35]
And then that whole area moves in. Can look a little bit nicer. Now it's also kind of weird cause this area's overlapping it a little bit, we'll fix that in a second, and maybe we slow this down. This is where you really don't want this to be too slow though, cause it can cause a little bit of a weird, like, if it's taking too long for something to happen, it's annoying for the user just to try and get a little ooh or ah out of them.

[00:10:57]
The other thing you'll be noticing is the animation is loading as soon as the page is, it fires as soon as the page loads. This is a difference between an animation and a transition. If an element has an animation, it will play that animation as soon as possible. Whereas a transition, it's waiting for something to tell it to move from this to that. Animations fire on page load, or if you add a class or something that adds an animation to an element with JavaScript, then that's when the animation will instantly fire.

[00:11:33]
To increase this a little bit, we also increase it to make it look a little nicer. We had our hero content. So we can reuse the same animation. Fade in. 2 seconds, but maybe this time we want to do an animation delay of 1 second. So it sort of staggers that we don't have to create a new animation for it, we can just say that the whole thing comes in and then the next part is coming in as well. But you'll notice something really weird happening there.

[00:12:00]
It's coming in and then it comes in. Cause we said this animation should wait a second before happening. So it's staying where it was originally, there's no animation on it yet. It waits that 1 second and then the animation kicks in. It doesn't start at the 0% keyframe. It waits until the delay is finished and then it looks at what the keyframes are. So if we wanted to do that on the hero content, we'd also actually have to say that at the beginning of that, we're starting with an opacity of 0.

[00:12:34]
That leads to a problem cause the animation fires and we're never seeing it. So we have to come in and say at 100% now, we actually do need to say we have an opacity. Still not fixed, cause now it fades in, up, and then we'll vanish. Because we get to the end of the animation, and now it goes back to its natural state over here. Ah, so then we come down here and we add the forwards to say, you know what, don't go back to the style you had here, at the end of the animation, stay at the 100% keyframe.

[00:13:08]
Fades in, fades up, the next one comes in, and now it actually stays there. And then we can just come through and we could say it was after the hero content. Maybe on all we could just do wrapper, no wrapper would actually be a bad one to do it on. Um, but we could add another class here or something just to have all the other content fade in slowly or once that's actually happened, just so it's not sitting there at the bottom as the rest of the things come in.

[00:13:21]
So you can decide how you might want to handle that. There's a few different ways we could do it, but I think it just gives us a nice idea right there on how those animations actually do happen.