This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Advanced Animation Properties" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel: Time for some advanced animation properties.
>> Speaker 2: Sorry, just before we jump on. You talked about the empty frame thing.
>> Rachel: Yes.
>> Speaker 2: Okay, so I'm think I'm seeing that, cuz I get a little flustered.
>> Rachel: Yes.
>> Speaker 2: Can you just pop back to the current frame, cuz I wanna see how to rid of that.
[00:00:22]
>> Rachel: All right. Another option is you'll notice in the curriculum under each one of the exercises, there's a link to the solution. So, if you ever want to revisit like whoa, I saw how you did that, that was really cool. Wait, can we go back? You can always go to the exercises in the curriculum, and go visit their solutions on your own.
[00:00:40] If you get stuck somewhere, sometimes it's fun to reverse engineer the solution. We talked about $name, we talked about $duration, we talked about delays, and we talked about easings. All things that, kind of have something in common with our good friends over in transition land, but CSS animation has another friend in $fill-mode.
[00:01:01] This is a very special CSS animation property. What it means, it's a little complicated, animation-fill-mode, it can be set to backwards, can be set to forwards and it can be set to both or none. And what does this mean? Well, you might have noticed that with CSS animations, I'm gonna demo this, because this is one of those things that I think is better to demo, than to describe.
[00:01:29] So, you might have noticed that when an animation happens, like sit, the cat will start sit down, and then he will not sit down. He will jump back to the beginning. How animations work is, unlike transitions, which describe a change, animations are more like you're playing a change.
[00:01:47] You're saying, you, I want you to do this and I want you to go there, and then, when it's over it disappears. It's like you're playing a CD, if anybody remember CDs, it's like you're playing a CD. The CD just rests, it's not doing anything, until you say, go to this track, play, and then when it gets to the end of the CD, it just stops, and it goes back to a default state of not being playing.
[00:02:10] It's the same with CSS animations. CSS animations don't have any effect on the element they're animating, until they start playing. And when they're done playing, they don't have an effect on that animation unless you use fill-modes. With fill-modes you can say, hey, CSS animation, that element you're animating, I want it to retain your 0% properties before it's played.
[00:02:34] So whatever that animation is, I want that element to have that 0% property, even before it started playing you, even if it has a delay of five minutes or it hasn't been clicked yet, I want you to do that. You could use, well let's see, that would be backwards.
[00:02:52] You could use forwards, which means it retains those 100% properties, even after the animation has finished. And you can use both, which means it will retain its 0% properties before it started playing, and it will retain its 100% properties after it's finished playing. And you can use none, which is default, which is to say, I don't want you to have any influence on this element, unless you're playing.
[00:03:14] Let me show you this. So we've got some buttons, you can make him run. It goes ready, set, start, but you'll notice how he just suddenly jumps into that running position, he's not like even in a lined up position. And we can make him sit, and then he just jumps back into his original position.
[00:03:32] Let's use fill-modes to make it so, yes, and we are using some JavaScript to add some classes to him. We got sitting, we got running. We were using JavaScript to add some classes to which we have scoped some animations. So you can see that .running .tuna has a run cycle, which we've described down here.
[00:03:58] And what we wanna do is we wanna say, that this animation should have a fill-mode of back backwards. Is it backwards or forwards? Let me check, forwards and backwards, yeah, it's got an s. I sometimes forget if it should have an s or not, it should have an s.
[00:04:14] should be backwards. So this way, when we say run he starts in that kind of leaping position, and then he'll start running. That's pretty cool. Now, the sitting I think is really obvious, cuz when you sit him down he should stay sat down. You told him the sit, you gave him an order, and he's not following it.
[00:04:31] So, let's set it forwards.
>> Rachel: And you'll notice this will mean that this 100% value here, after he's done sitting, he's gonna retain that value. And if we inspect him with the dev tools [SOUND] we will see that he has actually retained it.
>> [SOUND]
>> Rachel: No we won't.
[00:05:00] Damn! Dev tools are still trying to figure out how they display things that have been animated, and what their defaults are. So, this is an interesting thing to keep in mind, because you could have default states for everything that are different when animations are enabled or not. For instance, say you have an animation of this cat walking in, and sitting down at a computer and typing, and then walking off the screen.
[00:05:25] Yes I have done this. So, what happens if people have animations turned off? They're on IE or something. The cat's not gonna move at all. So, where's the cat? What should its default state be? Well, I would give that cat's default properties to be sitting in the middle of page typing at the computer.
[00:05:44] But then, I would use fill-modes to make sure that if animations are allowed that the cats retaining that starting position of 0%. And retaining the ending position off screen of 100%. This way I've created a bulletproof animation, where the cat will be on screen for people who do not get to see that animation, but he'll behave appropriately if animations are there.
[00:06:06] That might be of concern, I know some people in the audience work for big banks. You got a lot of different users. And not all of them are using the latest and greatest browsers, even though it would probably be in their best interest to. We can't control or users, we can only control what they see.
[00:06:25]
>> Rachel: So, there's something even more fun than $fill-modes, and that's &play-states. I mean, we get $play-state and we also get something called $direction. I'm gonna talk a little bit more about these, we're going to do some cool stuff with $play-states and $direction. So, animation play-state, it defaults to running that is to say you put an animation on something, and you've given an animation in the CSS, and it will run immediately, or it'll run after the delay you give it.
[00:06:52] But, the point is that it's running, that's its default. You could set it to paused. You could have it so that that animation isn't running by default, it's paused on the page. Why might you do that? Maybe you only want the animation to run on hover, or maybe you want it to pause when people are hovering over it.
[00:07:10]
>> Rachel: You have a magical fairy in the room, and then there's animation-direction, which defaults to normal. So, when you're playing animation like those walk cycles, we noticed it went from 0% to 100% and then it zip back to 0% around 100% again infinitely. Well it's the same with, you can change that, you can set it to alternate, which will run from 0% to 100%, then back to 0%.
[00:07:36] So, that first iteration will be 0% to 100%, that second iteration will be 100% to 0%, and then back to 0% to 100% for the third, forever, like a pendulum swinging back and forth. You have sent it to reverse, which would run from 100% to 0%. Why would you do this?
[00:07:54] I don't know cool hover effects, or alternate reverse, which is the same as alternate, except you're doing it in reverse. You're going from 100% to 0%, from 0% to 100%. Maybe you're doing that for a cool hover effect, actually I want to play with it now. But we're not gonna do that today, we're gonna do that some other day.
[00:08:14] That's for another workshop.