Smoothing the Transitions

[00:00:00]
>> Brian Holt: Just to go a little bit further with CSS animations, just to add a nice little touch to it. Here, we're in container, there's a property called transition, which says, hey, if I change the width from 5% to 10%, do just a nice animation between those two states.

[00:00:16]
And usually the browser is pretty good about doing stuff like that, animating heights and widths, and paddings, and margins, and colors, and some other things like that. So what we can say is, we can say, transition: width, and let me make sure I just get that right.
>> Brian Holt: We want this to take about.

[00:00:39]
You can decide how long you want it to take. I'm gonna put it at 0.5 seconds, and I want it to ease in and out. You can have it be linear so it moves steadily, but I'm gonna have it so it goes out and then it slows down.

[00:00:55]
Almost like a ball bouncing. It's fast when it hits the bottom, and then when it hits the top it slows down, and then it goes back down, that's what ease in and out looks like. So now if I say that, and I refresh the page here.
>> Brian Holt: Now, if I can click on it, you can see that the worm will move a little bit slower, it will actually have a nice little animation to it.

[00:01:20]
>> Brian Holt: Which is pretty cool, right?
>> Brian Holt: Man, I'm striking out, this game's hard.
>> Brian Holt: Until I win.
>> Brian Holt: And that, my friends, is it, that's the whole game.
>> Brian Holt: So, how do you feel about this? Hopefully that questions is like, this is really hard, but the concepts hopefully make sense that, given enough time and caffeine you could write this, or wine, depending how you feel about it.

[00:01:59]
>> Brian Holt: But yeah, we just coded a game from start to finish together.
>> Brian Holt: Took us about 70 lines of CSS, and about 175 lines of code, it's not too bad.