CSS Keyframes Solution

[00:00:00]
>> We have a form here that we needed to animate. So let's add some animations to this form and make it look a little bit better. So the first animation that I was thinking that we could add is a nice slide up animation, which is going to do a couple of things.

[00:00:15]
It's gonna go from opacity 0 to 1 and it's also going to translate it from via maybe negative a 100% or so back to its resting position. So we're going to do that at the bottom over here and define the keyframes. So if we remember our shorthands, we could use from and so we could say, opacity is 0 transform none.

[00:00:42]
Again, if you want to you could say translate y 0, but it's a lot easier to just say transform none if there are no transformations being applied. And then we could go to in say opacity 1 [COUGH] transform, translate by, actually that'd be the other way around. So transform none and so we're gonna put translate y over here so it's coming from 100%.

[00:01:13]
So now we have to actually apply that animation, so we're gonna do that here. We're gonna set the animation name to slide up, I believe I called it, yep. And then we need to add a duration, so animation-duration. Let's do this over one second or so, and then animation timing function.

[00:01:38]
Let's just do ease in outs, and let's see how that looks. So now I'm gonna reload and you can see that it's smoothly animating up. Now the usefulness of it keyframes here which you can play around with if you want, but it's if we want to actually have things happen in different times.

[00:01:59]
For example, let's say that we want it to be full opacity before it reaches the top, so we could say 50%, opacity 1. And so now it's going to be fully opaque at that halfway point. Now remember as a shorthand we could comma separate this and say at 50% and when we go to that opacity or sorry and we go to the end of the animation the opacity should be 1 and it's going to happen the same.

[00:02:33]
By the way, if you want to inspect these animations, like the timeline of these animations in the Chrome Dev tools and I believe in the Firefox Dev tools as well, there are animation tools. So I just press Command Shift P here in order to open this command palette and if I type animations we have a drawer here that is specifically for animations.

[00:02:59]
So if I were to reload this, you're gonna see this line over here preview it and it does actually show you the animation. And so now you have this nice timeline where we could drag this around and see the animation happening. So we have our 0% keyframe, our 50% keyframe, where it's fully opaque, and our 100% keyframe here as well.

[00:03:26]
Now, this is really useful, like just scrubbing through the animation, especially for debugging animations. You could also change the speed here if he really want to inspect the animation in detail, 10% a bit slow so we'll go the 25%. We could take that animation and we could replay it.

[00:03:45]
And this is really, really useful when you're trying to apply animations and tweak them a little bit. So you could also change the duration and change each of the keyframes on here like so. So yeah there's another animation that we have to add too which is shake. We're gonna be using this in one of the future lessons.

[00:04:08]
And so shake, we're going to move left and right. So these starting and the ending position, so from to are not gonna have any transform. So we're gonna say, transform none. And then, we could say like, let's just say 25%, or you know let's do 20%, 40%, 60%, 80%, you could have some fun with this.

[00:04:38]
This is going to be worth goes to the right so transform, translate x let's say 10%. And then we could do the same thing for the like in between those. So 10%, 30%, 50%, 70 and 90% that's gonna go to the left. So this is what our shake keyframes looks like, and so let's just apply it, just to see what it looks like.

[00:05:13]
So if I go, let me find it over here. And if I change this to shake, see how it looks. Okay, so it's pretty slow, and we could just change that to 0.3 seconds. So the total duration of the animation will be 0.3 seconds. And so we could tweak these values of course, we could inspect these animations.

[00:05:41]
And you could see each of the shakes happening over here, which is pretty cool. And so this is useful for stuff like if the form or parts of the form are invalid, so you know what if I change that back to slide up. I just wanna show you something real quick for our input there's something called an invalid attribute so invalid and then we can could just apply that animation.

[00:06:07]
And I'm actually gonna use the shorthand here, so it's animation. We're gonna shake it for three seconds, and just allow the default easing to happen. So now, if this is invalid, well [LAUGH] it shakes every time which we don't really want. So if we do invalid and if it's not focused then that's when we want the shake to happen.

[00:06:34]
So let's reload this is really slow forgot to put it to 100% and this is not an email. So now if I blur [LAUGH] So it goes really fast. So we should probably change this to like one second. So that's in email. Yep, it's pretty angry at us.

[00:06:58]
So yeah, so those are some examples of some animations you could add. You could also apply animations to the input in button and just do whatever you want in there. You could also add animations to input in button, so let's say I want to actually have slide up happen here.

[00:07:18]
But I actually wants the delay for them to happen after the form comes in. So I could say, animation delay, one second. And so now you see what happened, what are we missing? Let's see if anyone remembers?
>> Film mode.
>> Yes, okay, so we also need animation film mode, both.

[00:07:46]
So now, We have that, it's a little bit laggy just because the animation panel is up. So if we reload it's smoother, and so yeah that's the animations exercise. So did anyone have questions about that exercise or animations in general?
>> How about animation? Please state as I was calm.

[00:08:19]
Do you find yourself using that a lot with interactions or the kind of a property you don't really use?
>> Animation play state is a pretty fun property, in fact I wanna just demo it real quick. So let's go into our style again. Again, this is on the scratchpad.

[00:08:38]
So we are going to get rid of the currency animations over here or actually we will. Yeah, so let's just do that. All right, so at 50%, let's make this transfer form scale 2, and let's make it infinite, so it's going to keep going back and forth. So infinite.

[00:09:06]
Okay, so here's what we're doing. This is going to sort of pulsate. So it's gonna go from scale 1 to scale 2, so it's gonna be twice as big, go back and forth like that. Now let's see that we don't want this to happen when we're hovering over it.

[00:09:23]
So in order to get rid of that animation, let's do this, when we hover let's do animation none. See what happens. Okay, so it shrinks back down, but you know that's not what we want. We don't want the animation styles to be removed completely. We just want to pause it be like hey, hold on.

[00:09:48]
So this is where animation play state comes in handy. We could say animation play state paused. And so now, when we hover, it's gonna stop at where you hover it. So it's pretty cool.