Check out a free preview of the full CSS In-Depth, v2 course:
The "Direction, Shorthand & Fill Mode" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

You can change the direction of the animation, and define what happens before an animation starts and after an animation has ceased. Estelle also shows the shorthand version of specifying CSS animations.

Get Unlimited Access Now

Transcript from the "Direction, Shorthand & Fill Mode" Lesson

[00:00:01]
>> Estelle Weyl: Animation direction, so far, the pencil has always gone from the left to the right, right? We can actually say alternate, so the first time it's gonna go across this way, and the second time, it's gonna go backwards. So it goes from the 0% mark to the 100% mark and from the 100% mark back to the 0% mark in terms of our key frame.

[00:00:21] There's four values, it can be normal or alternate, which is what we saw. It can be only reverse, so it always goes from the 100% mark to the 0% mark. If you're doing a seesaw animation, this would be good for the second person to be, for the second person, you always wanna start with alternate-reverse.

[00:00:40] Starts in the backward mode, and then goes forward. So the first animation starts at the 100% mark, goes to 0, and then it goes from 0 to 100. So we've covered a lot of longhand properties. We might as well use the shorthand. So the shorthand would be animation name, duration, delay, timing function, iteration count, and direction.

[00:01:04] We don't need to put the direction in cuz it's actually normal, that's the default value, right? The thing is here, I put the draw line first. Had my animation name been running,
>> Estelle Weyl: Or linear, I would have had a really big problem. Because the first time it hits a value, the browser hits a value that it can understand as a value for one of the animation properties, that's what it will use it for.

[00:01:31] So if I had a guy who was jogging and I called it running, the browser would think,
>> Estelle Weyl: The value of the animation play state is running. It should be five seconds. It should be ease in, ease out. It should last a delay of 100 milliseconds, it should go five times.

[00:01:53] But where's the animation name? Because it used running as the play state. So the order does matter a little bit. If you use a key term, you're gonna get screwed. So realize when you mess up and your animation isn't working, that you might have used some key word for an animation.

[00:02:15] So what's nice about this is I can actually click these now with an animation and stop it. Cuz I've just changed the class. I basically changed the class and then made the animation go. And then when I click it, it goes in the reverse direction. I changed the class from flipped to unflipped, and that's it.

[00:02:37]
>> Estelle Weyl: Okay, so, the most complex part for people to understand is the animation-fill-mode. Well, it's either the animation-timing-function or the animation-fill-mode. So the animation-fill-mode is what you do during the time that the animation delay expires and what you do after you've hit the 100% mark or the 0% mark, depending on the direction.

[00:03:00] After your last animations happen, after your animation ends, what just happens? So none means just go back to the default as if the animation wasn't attached. Backwards means during the animation delay, keep it at the 0% mark. Wherever you're gonna start your animation, bring it all the way there.

[00:03:21] If you're doing reverse, it would go to the 100% mark. Forwards means wherever that animation ended, stop there and keep that good looking look, right? And both means do both forwards and backwards. So here, I have these four boxes. And I have changed the colors because I did a global search and replace on my document cuz I'm an idiot.

[00:03:50] And so it's gonna go from blue to dark blue, I guess. And the animation-fill-mode, the first one's gonna be none, the second one is forwards, the third is backwards, and the fourth is both. So the reason that the third one and the fourth one are both already 100% of 200 pixels from the left is because they're saying the 0% keyframe says 200 pixels from the left, and it should be blue.

[00:04:17] So it's picking up the blue, right? Does that make sense to people? Whereas the one where it says animation-fill-mode none and animation-fill-mode forwards, it's not doing anything before the animation delay expires. So I have to click somewhere.
>> Estelle Weyl: And then the animation is supposed to start. And I don't know where the place is that I'm supposed to click.

[00:04:41] So we're just gonna go to this test page right here. And once the animation starts, they all jump to the 200 pixels. And then the one that says forwards and both stays at the 100% mark. So the 100% mark says yellow, less 600 pixels, scale to rotate. So the both and the forwards are stuck on the 100% mark, and then when it says none or backwards, stays at these.

[00:05:08] So let's actually just do this again, I'm gonna run it again. To run it again, I just change this, okay, there's no shocks me. Here, we have five seconds while the delay expires. And then, everything gonna go to the 200 mark, be blue, everything's gonna rotate and be green.

[00:05:30] Just the both and the forwards are gonna stay as yellow.
>> Estelle Weyl: At the start, the none and the backwards and the both, both started at the 200 mark in blue. Does that make sense to people?
>> Estelle Weyl: Okay, and that was that slide.