Up next in 10
Learn CSS Animation In 15 Minutes
3K views
Feb 7, 2024
Unlock the world of captivating web animations with this brisk and informative tutorial - "Learn CSS Animation in 15 Minutes." In this video, you'll dive into the essentials of CSS animations, gaining a swift and insightful understanding of how to bring your web pages to life. The tutorial covers key concepts such as keyframes, transitions, and transforms, providing developers and enthusiasts with the tools to create visually dynamic and engaging designs. Whether you're a beginner seeking a quick introduction to CSS animations or a seasoned developer looking to enhance your styling toolkit, this guide offers a concise and accessible walkthrough. Join this tutorial to accelerate your knowledge of CSS animation and discover how to seamlessly integrate movement and interactivity into your web projects in just 15 minutes.
View Video Transcript
0:00
Are you feeling overwhelmed by CSS animations
0:02
If so, this is the perfect video for you, because I'm going to break down everything there is to know about CSS animations
0:08
And also, if you're feeling stuck with CSS selectors or confused about all the selectors that are out there
0:14
make sure to check out my full CSS selector cheat sheet down in the description below that's going to give you all the information you need to know about selectors
0:20
Let's get started now. Welcome back to WebDev Simplified. My name is Kyle, and my job is to simplify the web file
0:29
for you so you can start building your dream project sooner. So if that sounds interesting, make sure you subscribe to the channel for more videos just
0:36
like this. Now to get started, I have just some really basic HTML and CSS
0:41
I have a parent and a child div and as you can see the parent is outside the child so the
0:45
child is inside the div. This parent has this dark blue color, and this child has the red color
0:52
Then whenever you hover over the parent, all I'm doing is transforming the child
0:55
So essentially I'm moving it all the way to the right side of the parent and back again, depending if it's hovered or not
1:00
We want to talk about animations, because right now, this is really jerky. There's no smooth animation between these different states
1:07
And in CSS, there's two different ways to animate. You can use the transition property, which is simple and works great for doing simple animations
1:15
Then there's the full-on animation property, which is a bit more complex
1:18
but is great for making more complex multi-step animations. In this case, we're going to get started with transition and then move on to animation
1:26
because this can be done by just a simple transition. So how do you go about writing a transition
1:31
Well, all you need to use is the transition property in CSS
1:35
And the first mistake most people make is they put the transition on the hover
1:39
or the place where the transition is happening. But in our case, when we're hovering over the parent, the transition will be applied
1:45
But as soon as we unhover, the parent, the transition will be removed. So where you need to actually put it is on the child itself
1:51
And I'll show you why once we get the transition written. So in order to write a transition, you can just write out the word transition
1:58
As you can see, there's multiple transition properties. There's timing function, property, duration, delay, and then just the transition keyword itself
2:06
This is just like with margin, how you have margin left, right, top, bottom, and then the margin keyword that has all of them combined into one
2:12
Transition just combines all four of these properties into one. And it's generally how you're going to write transitions
2:18
So by default, a transition is going to transition all of the properties on your element
2:22
It'll have all written here. But we really only want to transform, or transition our transform here
2:26
So we're just going to write Transform. What this does is tells our CSS we're only wanting to animate this one single property and nothing else
2:35
So if our color changed, for example, it wouldn't actually be animated. And then what we need to do is specify how long this animation will take
2:41
You can say 100 milliseconds, for example. In our case, we're going to say one second
2:46
And this is all you really need for a transition. If we save this and hover, you'll notice our box moves to the right over one second
2:52
We unhover and it moves to the left over one second. And if we get rid of Transform here, you'll see that it still works because it just defaults to animating all of our properties
3:01
So if we were to, for example, change our background color here, to green, you'll now see it transitions slowly from red to green as it goes across the board
3:14
But inside here, if we just wrote Transform, you'll notice that now our color transformation is instantaneous
3:20
while the actual transform itself is being transitioned back and forth over one second
3:25
So this is great for specifying individual things that you want to transition and other things that you don't
3:30
So now I want to show you why the transition isn't put on the hover version
3:34
So if we come over here and put transition on the hover, just like this and I save
3:39
when I hover over this object, you're going to notice it transitions really smoothly. And that's because I'm currently hovered, so I have a transition being applied
3:46
When I unhover you notice it instantly moves the element back And that because this transition property is no longer set on the child because this hover state doesn exist as if this was not here So there no transition being applied to the child itself
3:59
so it doesn't do that smooth animation. This is why when you specify transitions
4:03
you always want it to be on the base class, in our case, this dot child, and not the actual modified class of hover in our case
4:10
Now, the last two things that we can do with this transition property are specify a delay as well as a timing function
4:15
A timing function is essentially determining how you're, different animation is going to play out
4:20
For example, we could put linear as our timing function, and this means that it's going to be even spacing between the beginning and end of our animation
4:26
Each of the frames of our animation takes the same amount of time, so our object moves linearly from one side to the other
4:32
If we did, for example, ease in, out, what this is saying is start out slow and end slow
4:38
and in the middle be slightly faster. So if I save this and hover, you're going to notice the animation starts out slow
4:43
speeds up in the middle, and then slows down at the end. And the same thing on the way back
4:48
And if you want to really take this and customize it even further than just using these few preset values
4:53
what you can do is we can just inspect our element here. We have our child. And if you come down here where it says transition, you'll notice it has this little squiggly line next to your ease in out
5:02
Click on this and it'll open up an editor for you where you can actually edit the exact curve
5:07
And this is the path that your element is taking. So here this is ease in out. This right here is another type and we can kind of cycle through a bunch of different preset ones
5:14
or what we can do is drag around these handles and create our own. So for example, if we wanted the thing to bounce, we could drag this here so it goes past the top
5:23
and it's going to bounce back. And if you see this ball up here, this is essentially what our animation is going to look like
5:28
So if we do this, it's going to start out slow, speed up, bounce over top, and then come back
5:33
We'll just copy this cubic bezier down here. You almost never write these by hand
5:37
These editors built into the browser are perfect. So we copy this and just replace this keyword, easing out, with that cubic bezier
5:43
Now when we save and we hover here, you're going to notice it starts out really slow, and
5:47
then it jumps past our ending value. As you can see, it jumps past the end and then comes back to the final resting position
5:53
This is how we can write these custom cubic bezier curves in order to further take our animation
5:58
to the next step with these really cool timing functions. And then the last thing we can do with these transforms is specify a delay, so let's just say
6:06
we want to delay for three seconds. Now when I hover over this, it's going to take three seconds before the animation actually occurs
6:13
and then it's going to move. Same thing when I release it, you're going to take three seconds
6:17
and then it's going to start the actual animation itself. Now, unfortunately, that's pretty much all that we can do with transition
6:23
We can't get any more complex. For example, if I wanted to take this cube and move it from the top left to the bottom left
6:28
to the bottom right to the top right in kind of a circular motion, I couldn't do that with transition because it requires multiple different steps
6:35
which is where animations come in. So what I'm going to do is show you how to take this current transition
6:40
We're just going to simplify this a little bit. we're going to change this to ease in, for example
6:44
Just so we have a little bit of a simpler transition. I'm going to show you how to take this transition and convert it over to the animation syntax
6:50
and then how we can take that a step further and make this circle around our cube here
6:54
So to convert a transition to an animation, all we need to do is write out the word animation
6:59
And with animations, you write it in the place where you want it to happen, in our case, here on our hover
7:05
So we write out animation. As you can see, animation has a bunch more properties than the transition does
7:10
You can see it has all of these different properties, and then the animation keyword, which combines all of them together
7:15
And generally, you'll just write everything in the animation keyword because it's much easier. And the first thing an animation needs is a name
7:21
This can be anything that you want. It's just a custom name so you know what this animation is
7:25
We're going to call this left to right, because that's what it does
7:29
It moves from the left to the right. Then just like with our transition, we can specify our duration
7:34
In our case, one second. We can specify a timing function. In our case, ease in
7:39
We could even specify a delay if we wanted that three delay but we just going to leave that off for now This right here is all of the code for our animation complete But how do we actually write out our animation We gave it a name but where do we define that name
7:52
Well, that is where keyframes come in. So if we just come down here, type in at, and then keyframes
7:57
This is just like if you did a medius query, you put the at symbol, and then the word keyframes
8:02
and this has to be outside of any selector. It's on its own. Then we put the name, in our case left to right
8:08
Again, this can be anything you want. It just has to match your animations. name. This is how they get linked together. Then we put a set of curly braces, and in here is where
8:16
we define our keyframes. And keyframes essentially determine what our animation looks like at all
8:21
of the values between 0% and 100% complete. So in our animation, at 100%, we want to have this transformation
8:29
We could say 100%, and we can just copy in here our transform translate x to 100%. This is what our animation
8:37
looks like at 100%. And by default, if you don't specify anything, for example, 0%
8:43
it'll just default to whatever the values here are for our child itself
8:47
So right now, if we save this, we should get the exact same animation. If I hover, you'll notice it moves over to the right
8:52
we'll notice something weird. As soon as it gets to the right-hand side, immediately the animation jumps back to the very beginning
8:58
Let's try that again. We hover, it gets to the right, and then immediately it defaults back to where it was
9:02
at the beginning. The reason for that is that animations, what happens, is they do everything
9:07
inside of their keyframes. In our case, all we have is 100% because our 0% is this default up
9:12
here. And it's saying, okay, do all of this animation. And as soon as the animation's done
9:16
it removes all of the properties it added. So it goes back to whatever the default is here
9:21
inside of child, which in our case, our translate is not applied, which is why it's in the default
9:25
position. If we wanted to, for example, keep this transform and keep this extra translate
9:31
what we need to do is tell our animation that. So what we can do inside of animation is we want
9:36
to say that this animation is forwards. This property is called the animation fill mode. This can
9:42
either backwards, both, or forwards. And really all this is saying, if you specify backwards
9:47
it says before my animation starts, apply all the properties at the 0% keyframe, which we don't
9:52
even have. If we specify forwards, it says after my animation is done, keep all of the properties
9:58
inside of the 100% keyframe. And finally, if you use both, it'll essentially combine backwards and
10:03
forwards together. So now if we save this and hover, it's going to move to the right and it's going to stay there because this four words keyword is saying
10:10
I want to keep all the properties in the 100% keyframe so it's keeping this transform here
10:16
Another really important thing about CSS animations that most people don't think about is performance
10:20
and it's actually really easy to make poorly performing CSS animations. So I made an entire video about CSS animation performance
10:27
which I'll link in the cards and description down below. So now I want to take this a step further
10:32
As I said, I want to move it around here in a circle from top left, bottom left, bottom right, top right
10:37
So how will we go about doing that? Well, let's just come in here. We're going to write out different keyframes
10:41
We're even going to define our 0% keyframe, even though we really don't have to. And we're going to say transform, translate, x, and we want this to be 0
10:52
This is going to be our default value. And 100%, we want this to be in that top right corner
10:56
So this is already correct. Now we need to define our intermediary keyframes
11:00
So we're going to have 33%, and we're going to have 66
11:05
So at 33%, all we're going to do is take our transform, we're going to translate the
11:12
y direction, 100%. This should translate as down 100%. And let's just save this and see if this works
11:20
If we hover, you'll notice it moved us down that 100%, which is what we expected. Then it's 66%
11:26
We need to essentially have our transform contain both our Translate X of 100% and our translate
11:34
Let translate Y of 100 That should correspond with the bottom right hand corner And now if I save that we should get this box moving in a circle So if I hover you can see it moves all the way around our square from top left
11:47
all the way to the top right, in order from bottom, top left, bottom left, bottom right, and top right
11:52
And if I remove and go back, you can see that it is doing that full loop again, which is exactly what we want
11:57
So right now we've pretty much only taken what we can do with a transition, and then slightly improve upon it by adding additional keyframes inside of here
12:06
We can actually do so much more with animation. And let's just remove this transition up here
12:10
This hasn't been doing anything, but just to be super clear that we're working with just our animation
12:14
There we go, it's working as expected. So with animation, we can go a step further than just doing a complex animation
12:19
We can also tell our animation how many times to repeat, the order we want to run the animation, and so many other things
12:26
So, for example, we have something called an animation iteration count. We can say how long we want the animation to be
12:30
repeating. We could say three, for example. This is going to cause our animation to occur three
12:35
different times. So if I hover, you can see it moved around, around, and around. And right now
12:41
it's doing this little jarring thing where it jumps back to the beginning, repeats the animation
12:44
jumps back, repeats the animation. If instead of doing that jumping motion, we wanted to make it go
12:49
around and then back and then around, we could specify the direction of our animation. And there's a
12:54
direction called alternate, which essentially just says when I get to the end of the animation, for the next
12:59
iteration go backwards. So if I hover this, you can see that it's moving back and forth
13:05
and it does that three total times. One time forward, the second time goes backwards, and the third
13:10
time goes forward. We could also specify a delay here, and as long as we put it after our duration
13:15
it doesn't matter, we could just come in here and say, well, we'll do three seconds. So when I
13:19
hover, there's going to be a three second delay, and then our animation is going to occur, as you can
13:23
see, and it does it three different times, and then it stops. So we can combine a bunch of different
13:27
stuff with animations, but we can take this a step further. Let's say that we want this animation
13:32
to occur infinite times with no delay, and instead of doing this on hover, we actually want
13:38
this animation to be permanent. So we'll just put it up here, and now when I save, you'll notice
13:43
that this just does the animation over and over and over again, and since we're doing it infinite
13:46
times, it's never going to stop. But we can actually make this animation play and pause based
13:52
on something called the animation play state, I believe it's called animation play state. And this
13:57
This determines whether the animation is running or paused. We can set it to be paused whenever the hover state is active
14:04
So now, when the animation is running and I hover, it will immediately pause the animation
14:08
Unhover and it'll continue and hover and it stops. And it'll stop wherever in the animation I am whenever I hover, because I'm setting this play
14:15
state here to pause. Running is just the opposite of paused. It's essentially the default
14:20
The means the animation is currently occurring. The final thing that I want to mention, if we just change this back to paused, is that
14:26
But inside of these keyframes, you can do whatever you want. For example, I could change the background color, start it out at red, and then jump all
14:34
the way down to 100%, and say the background color is green
14:39
Now if I save, you'll notice throughout the animation it's changing from red to green
14:44
And even though I didn't supply a background color in this intermediary state, it's just saying
14:48
from 0% start at red, and then slowly animate all the way to green at 100%
14:53
And if I threw something in the middle here, for example, 50%, I could say a backernery state, it's
14:56
background color of blue. Now what's going to happen is it's going to animate from red to blue
15:02
The blue will be right in the dead middle here. If I hover, you can see it's blue right in the
15:06
very center. It'll go to green, back to blue and red, and it'll do that over and over and over
15:10
again. You can do a lot of really cool things with these keyframes. Essentially, what happens
15:14
is it just does a transition between each one of these keyframes. That's really all that's
15:17
occurring. And that's all there is to animations in CSS. If you enjoyed this video
15:22
then you're going to love my free CSS selector cheat sheet, link down in the description, which
15:26
going to show you all of the selectors you need to know in CSS. Thank you very much for watching this video and have a good day
#Computer Education
#Educational Software