CSS animations masterclass | Ahmed Sadek | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (37m)
    • 1. class intro and prerequisites

      1:13
    • 2. CSS animation introduction

      3:31
    • 3. create css animations with more stages

      4:55
    • 4. animation fill mode property

      6:23
    • 5. animation iteration count property

      3:43
    • 6. animation direction property

      2:57
    • 7. animation shorthand method

      1:46
    • 8. floating text using css animations

      3:45
    • 9. loading effect using css animations

      4:14
    • 10. driving a car and a motor bike using css animations

      4:56
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

15

Students

--

Projects

About This Class

in this class we will learn and understand the basics of CSS animations and this will be our first step of exploring the world of web animations.
we will learn what is CSS animations and how it works, then we will learn about the different animations properties like:

- animation fill mode property

- animation iteration count property

- animation direction property and more!

after finishing this class you will be ready to take my other classes on advanced CSS animations that will let you explore more and more examples.

there's one prerequisite for this class and that is my other class on CSS transitions and transforms so go and check it out before watching this class.

Meet Your Teacher

Teacher Profile Image

Ahmed Sadek

full stack web developer, freelancer & t

Teacher

Hi, it's Ahmed, glad you made it here!

i'm a senior web developer working as a freelancer for the last 7 years, i've developed hundreds of web projects and have tens of happy clients!

i've helped companies of all sizes to improve their business.

i can't wait to share all the web development knowledge i have with students here in skillshare so if you're interested in learning modern web development technologies we will see each other inside my courses!

 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. class intro and prerequisites: Hello everyone. Welcome to my class on CSS animations basics. But first, let me introduce myself. I'm Ahmed C deck, a full-stack web developer and designer with more than seven years of experience. And I want to let you know more about this class that I think you'll really enjoy CSS animations basics. In this class, we will learn what CSS animations are, how they work, and what kinds of properties they have. We will also create some fairly simple examples together so that we can apply what we learned. And I'll be creating more classes weekly that will contain only advanced CSS animations examples. So by all means, go and check out my profile to see those. But you have to watch this class first to understand the basics of CSS animations. Also, there is one prerequisite course with this class, and that is my CSS transitions and transforms basics cores. You could find that course or my profile as well. So make sure to check it out before trying this one because it will help you understand this class and get the most out of it. Okay? Okay. I'm really looking forward to seeing you in the next lecture. 2. CSS animation introduction: Hello everyone. Welcome to this new section of the course where we will be talking about CSS animations and keyframes. Now, the way CSS animations and keyframes work is very simple. First, you have to define or create a CSS animation rule and emit any name you want. Second, you add this animation rule. You create it to any HTML element in the page so that the animation works on it. This will be much easier if we see it in action. So here in my HTML, I have this div all by itself, and I've added some styles to it in my CSS. I've just added a width, height, and a red background color. So when we view this in the browser, we can see our empty div is sitting right here. Now let's go back to our CSS and see how to use keyframes and animation on this div. So we said that the first thing we need to do is to define the animation rule. And in order to do that, we write it like this at mark key frames. Then the animation name, let's say moving. And then inside of it we use keywords like from and too. So I will say from add, transform, translate x 0, and then to transform translate x 100 pixels. So what's going on here is we created an animation rule. And what this animation rule will do is it will take the elements from one state to another. So it will take the element from translate X 0, meaning from its original position to translate x 100 pixels grey. Now, if I go to the browser and reload my page, you can see nothing changed. Element is just sitting in its place and no movement has happened. And that is because we created the animation rule right here, but didn't tell the browser which element will receive this animation. So if you're familiar with any programming language, this is very similar to functions where you create a block of code that should do something. And then you add that block of code to the elements you want that block of code to effect. So what we should do here is we should tell the browser what element this animation should work on. And this can be done easily by going to the element itself, which is the div. So there are two properties required to make the animation work on this element. The first is the animation name, which is moving. And the second is the animation duration. Or how many seconds we want this animation to take from start to finish. Let's say three seconds. And now, when I go to the browser and reload, you can see that the div is now starting from translate X 0, in other words, from its original position and moves to translate x 100 pixels over a period of three seconds. This is it for this lesson. That was an introduction to CSS animation and keyframes. We learned what they are and how they work. And in the next lessons, we will learn more properties that will give us further control when using CSS, animations, and keyframes. So see you then. 3. create css animations with more stages: Hello everyone. In this lesson we'll learn how to create animations with more than two stages. So let's jump right in. Here is the code from the previous lesson. If you take a look at the keywords were using here, you can see we have from and to. And this means that the element will change from this first stage to this final stage over a specific duration, which in our case is three seconds. Now, what if we want to add more changes and more stages? For example, instead of making the element move horizontally from the first position to the second one, what if we want it to move from the first position to a second one and then to a third one. So we would have three stages. Well, we can do this easily by using the percentage method instead of the keywords from n2. So what we can do here is we can remove this from keyword and add 0% instead. So this 0% means the starting point of the animation duration. Then I will remove this two and add 100%. And this means at 100% of the animation duration or three seconds. So what I'm doing here is I'm just saying that at 0% of the animation duration, meaning the point I want the animation to start at, I want to add this transform, which will actually change nothing for the element. So the element will start from where it originally was on our page. And then at 100% of the animation duration time, meaning at the end of second three, I want the element to be at this position. So during these three seconds, the element will move from the first position to the second position. And nothing should change from the previous lesson. So I will go to the browser and reload. And you can see that div is moving from its original position to its new position over three seconds, just like we did in the previous lesson. Let's go back to our CSS. Now, this is still two stages. We want more stages than that. We can do that easily using the percentage method because it gives us many choices from 0% to 100%. So for example, if I go right here and change this 100% to 50%, and then below that at 100%. Then transform, translate 100 pixels on the x axis. And then let's say 500 pixels towards the bottom. So now we have three stages. The first stage, the second stage, and the third stage. So what will happen is from 0% to 50% of the animation duration, meaning from the beginning to the midpoint of the animation duration. Or during the 1.5th one seconds of the full three seconds, the element's position should change from its original position horizontally to this second position. And then in the remaining 1.5 seconds, the element will change from this position to this new position, which is one hundred, ten hundred pixels to the right and 500 pixels toward the bottom of the page from its original position. So when I go to the browser and refresh, you can see the element is moving from its original place to appoint one hundred, ten hundred pixels to the right during the 1.5th one seconds. And then moves to a new position, which is still one hundred, ten hundred pixels to the right and 500 pixels toward the bottom during the Second 1.5 seconds. And then after that returns to its original position once the animation duration is finished. Now we can make the change duration different for each stage. For example, if I change this 50% to 10%, in this situation, the first stage will happen much, much faster because it will happen over a period of only 10% of the three seconds. While the second stage will happen slower because it will happen from 10% to 100%, meaning over a period of 90% of the three seconds. So let's go to the browser and see what that looks like. You can see the first stage is happening much faster now, while the second one is happening slower. So this is it for this lesson, everybody, if you have any questions about it, just leave it in the Q and a section, and I will do my best to help see you in the next lesson. 4. animation fill mode property: Hello everyone. Welcome to this new lesson where we will be learning about the animation film mode property. Alright, so what we did in the last lesson is we made this div moved to the right, 11000 pixels, then towards the bottom, 500 pixels, like so. And then after the animation ends, you'll notice that the div is just popping back into its original place. That may seem odd. So what if we want to make the div stay in its final position where the animation ends instead of popping back like that. Well, we can do that using the animation fill mode property, which basically tells the browser what to do with the element outside the animation window, meaning before the animation starts and after it ends. So here we're dealing with the second case, which is after the animation ends. And there are two choices. The first one is the element will pop back to its original place, which is the default. And the second is the element will stay in its final position. And we will do that using the animation film owed property. So back to our CSS. I will go right here inside the div selector and add animation fill mode. And we have four values. The first one is none, which does nothing outside the animation window. It will just say, when the animation is finished, return the div to its original state before the animation. And of course, it's the default value. The second value is forwards, which should interest us in our situation because forwards tells the browser to take the last stage of the animation here and apply it to the element at the end of the animation. So now, when I go to the browser and reload, you can see that the element stays in its final position and doesn't pop back to its original place before the animation. Personally, I think this looks more realistic. Now, we can also use a value called backwards. So to demonstrate this, I will just go back to my CSS. I will go right here and add another property which is animation delay. And let's say three seconds. And what this will do is it will make the animation wait three seconds before it starts. So if I go to my browser and refresh, you can see the div wait three seconds and then starts to move back to our CSS. Now, let's say we want the animation to start from 500 pixels to the right and not from its original place on the page. I will go right here and change this to 500 pixels instead of 0. I will also change 10% to, let's say 50%. Because I want the horizontal movement to take a longer time so that we can really see it. And I will also change the transition duration to five seconds so that we can see what is happening clearly. Now, according to the code that we have right here, what should happen is the animation should wait three seconds, and then it should start from this point right here, which is 500 pixels to the right of its original position. And then the animation should go on until it's finished. And at the end, the div should stay in its final position because we said the animation fill mode forwards. So when I go to the browser and reload, you can see the animation waits for three seconds. Then the element parts 500 pixels to the right. Then the animation starts and moves on like before. Now, this might not be what you expected. You may have thought that the div would begin here, 500 pixels to the right, and then wait three seconds. And then after that, the animation would start. I mean, that makes sense because we set the starting point of the animation at 500 pixels to the right. But this is not the default. Remember that the default is that before the animation starts and after it ends, the element should be in its original place. We were able to change the position after the animation is finished and make it the final point of the animation using forwards as a value of the animation film owed property. And we can also do that and make the animation starts at the starting point we defined in the keyframes and not in its original place by using another value which is backwards. So I will go back to my CSS and change this forwards, backwards. Then I will go to my browser and reload. And now you can see the animation is starting from the 0.500 pixels to the right and not from its original position. But because we change forwards to backwards, the div is no longer staying in his final place, it snapping back to its original position again, we can fix this easily by applying both forwards and backwards. So I will go back to my CSS and change this to both. And now when I go and reload the browser, you can see that the elements stays on the starting point for three seconds, then moves to the final point, and it stays there are to the animation. So to wrap things up, the animation film mode property just tells us where the elements should start from and where it should end up. If we don't define it, the element will just start from its original state before any animation takes place. And it will also return back to this original state after the animation is finished. But we can use forwards to make the elements Day at the final step of the animation. Or we can use backwards to make it start from the starting point of the animation. Or we can simply use both to get the two results together. 5. animation iteration count property: Hello everyone. Welcome to this new lesson in the CSS animation transition and transforms course, where we will be talking about the animation iteration count property. So Animation iteration count simply tells the browser how many times the animation should be repeated and it accepts values of numbers. So two means the animation will be played twice, and three means it will be repeated three times and so on grade. So here in my CSS we have everything as it was at the end of the previous lesson. I will just remove this animation delay property so that the animation starts immediately. And I will go right here and add animation iteration count. Let's say three. And I will change the animation duration to three seconds so that it will be a little bit faster. And now, when I go to the browser and reload, you can see the animation will be repeated three times before it's finished. Awesome. We can also use the keyword infinite to make the animation play an infinite number of times or forever. So let's go back to our CSS and try that out. I will go right here and change this to infinite. And now when I go back to the browser and reload, the animation will be played forever and will never stop. And that's it for that property. It's very simple. It just specifies how many times the animation should be played. I also want to talk a little bit about another property, which is the animation timing function. This is similar to the transition timing function we learned in the first section of the course. And it accepts the same values which are 0s. Linear. Ease in, ease out and ease in out. So let's review those together. I will change this infinite to one and then add animation timing function 0s. So what is does is it makes the movement starts slow, then go faster when n slow. Now, Alright, let's see what that looks like. But first, let's change the animation duration to five seconds again. To see what's going on. I will go to my browser and reload. And with the animation plane, you can see the effect of 0s. All right, let's go back and try ease out, which starts fast. Wind slows down at the end. Like so. Then is in which, if you remember, starts slow, then goes faster at the end. And ease in, out, which is very similar to ease as it starts slow, then goes faster in the middle, then returns to slow at the end. And finally, linear, which will make the rate of the change constant so that the speed of the movement will be the same throughout the animation duration. And so guys, this is it for this lesson, and I will be seeing you in the next one. 6. animation direction property: Hello everyone. Welcome to this new lesson in our course, where we will be talking about the animation direction property. The animation direction properties pretty straightforward. It just specifies the direction of the animation and it accepts four values. The first value is normal, which is the default. And it tells the browser to start the animation from its beginning right here to its end, right here. So let's try that. I will go right here and add animation direction, normal. And when I go to the browser and reload, you can see the animation is playing normally from the beginning to the end. The second value we can use is reverse, which tells the browser to play the animation. In reverse, meaning it will start from the animations end and finish at its beginning. So I will change this to reverse and go back to my browser. And you can see the animation is playing in reverse from the end to the beginning. Great. Now the third value is alternate. And what alternate does is it makes the animation play from the beginning to the end, then go back from the end to the beginning. And then from the beginning to the end. And from the end of the beginning and on and on and on until the animation iteration count finishes. So I will change that to alternate. And I will also change the animation iteration count to infinite and the animation duration to just three seconds. And now, when I go to the browser and reload, the animation plays from the starting point to the finishing point, and then returns from the finishing point to the starting point and so on. And we also have alternate reverse, which does the same thing as alternate, but it just starts from the end to the beginning. And this is the only difference. So let's check that out. I will add alternate rivers. And you can see it starts from the end to the beginning and then goes back to the end. And it will keep doing that forever. 7. animation shorthand method: Hello everyone. In this lesson, we will learn how to combine all of the CSS animation properties into one single property. Because if you look at them, there are many properties and they are confusing. So we can combine all of them into one property called animation. But how do we do that? I'll go right here and just say animation. And then the first property I usually add is the animation name. So I will say moving. Then a space and add the animation duration, which is three seconds, and then a space. And we can just put all of these properties side-by-side. It doesn't matter how they're ordered. They will do the same thing no matter which appears first or a second or whatever. But you have to keep something in mind if you want to use the animation delay property, you have to add the delay time after the duration time, because the browser always considers the first-time value you add here as the animation duration, the following time value as the animation delay. So if I add five seconds here, what will happen is the browser will wait five seconds before the animation starts. And just like that, we've combined all the properties into one single property. And we've got the same animation that we wanted before. 8. floating text using css animations: Hello everyone. In this lesson, we will learn to create this text floating from right to left effect. It's an infinite or enlists animation. And when you look at it, you can see it rotates from left to right, then from right to left, and so on and so forth. So we will start here in our HTML by adding an H1. Then inside of it, I will say coming, then BR tags. And inside of that, soon. Now let's go to our CSS. I will target the H1. Add text align center to center the text. Color. White. Then font-family. Arial. Font size, 90 pixels, line height, 90 pixels for that two letter spacing. Then text shadow. These values. And you can see now we H1 is looking exactly like we want. Next, we want to animate it. So I will go right here and create a new animation. I will say at mark keyframes. And now we'll name it float. Then I will say from and inside of it, transform, rotate five degrees so that the initial state of the H1 will be rotated five degrees clockwise. Then I will say to transform, rotate minus five degrees, so that the final state will be rotated five degrees counterclockwise. And now let's go up here and add this animation to the H one. So I will say animation. Then the animation name float, then the animation duration, three seconds, and the animation timing function linear. Then the animation iteration count, which is infinite. Of course. Now, when I reload the browser, you can see the H1 starts five degrees clockwise, then moves until it rotates to five degrees counterclockwise, then parts back to its initial state. But we don't want that. We want it to move from the initial state to the final state. And then from the final state to the initial state. And keep doing that. We can fix that no problem by setting the animation direction to alternate. So I will go right here and add animation direction alternate. And now when I reload the browser, the H1 should animate the way we want from initial state to a final state and some final state, two initial state, and so on. 9. loading effect using css animations: Hello everyone. In this lesson, we will create this nice CSS loading animation using keyframes as well as CSS transforms. So here in my HTML, I will add a div. And given a class of loading, then I will go to my CSS. Here we have some styles added to the body that will just send to the div and add a nice background color. So now I will target our div with the class of loading. Then I will set its width to 100 pixels, then its height to 100 pixels as well. Then I will add background color, white so that we can see it. Then border radius 12 pixels to give it a nice rounded corners. Now, when we go and take a look at a demo and made it slower and made the animation iteration count only one so that we can see clearly what is going on. So when I reload my page, you can see the div starts from its original position, then it rotates on its y-axis by 180 degrees. And then when it's at 180 degrees on the y-axis, it rotates again on its x-axis by another 180 degrees. So now we have three stages of the animation. The first stage is 0%, and at this point, the rotate y and rotate x r at 0, meaning the element is in its original position without any rotation. Then the second stage is 50%, at which the element is rotated by 180 degrees along just the y-axis and the x-axis rotation is still 0. Then the final stage is 100%, where we add the rotation on the x axis by 180 degrees. So that at this stage, the element will be rotated on both its X axis and Y axis by 180 degrees. So let's do that. I will go to my CSS and create a new animation and name it loading, for example. Then inside of it, I will add the first stage 0% and say transform. Rotate x 0 degrees and rotate y 0 degrees there too, so that the animation starts from its original location. Then I will add the second stage of the animation at 50%. And i will say transform, rotate x 0 and rotate y 180 degrees. So at 50% of the animation duration, we want the div to end up rotated by 180 degrees along the y-axis. And then at the final stage, at 100% of the animation duration, I will add transform, rotate x 180 degrees, and rotate y 180 degrees as well. And now I will go up here and add animation. Then animation name, which is loading, then animation duration, two seconds, animation timing function, linear. And finally, animation iteration count, which is the An's right, infinite. And because we are using the rotate x, rotate y functions, which work on a 3D environment, we should define a perspective. So I will go up here to the body and add perspective 200 pixels. And now when I reload my browser, you can see the div will start by rotating 180 degrees on its y-axis, then 180 degrees on its x-axis. And we've got the effect we wanted. 10. driving a car and a motor bike using css animations: Hello everyone. In this lesson, we're going to create this nice infinite animation where we have a car and a motor bike riding on this road. The idea behind this example is simple. We have a background image, which is this road. And we have two images. One for the car and the other for the motorbike. We color in the motorbike images are not moving. They're fixed in their position. The movement here is coming from the background. So we are animating the background position from the bottom left corner of the image to the bottom right corner. So let's see how we can create this animation. I will go right here in my HTML and add a div with a class of background. Then I will go to my CSS, target the body and add margin 0 and padding 0 for that as well. Then I will target the div with the class of background and add height 100 vh, then background URL, and we will add the road image. Then I will add background position, bottom left. So this is the initial point of our animation. We will animate the background position from the bottom left to the bottom rate so that we can get them moving background effect we want. So let's do that. I will go right here and create a new animation and call it driving. And inside of it. Remember, we want to animate the background position from the bottom left to the bottom right. So I will say from background position, bottom-left to background position, bottom rate. Great. Now let's add this animation to our background. I will go up here and say animation. Then the animation name, which is driving, then the animation duration, 15 seconds, then linear and infinite, of course, because we want the animation to continue repeating itself indefinitely. So now, when I go to my browser and reload it, you can see that the background position is changing from bottom-left, the bottom rate, and making the background move nice and smooth. And now we only need to add the images of our car and motorbike. So I will go back to my HTML and go inside our div and add the first image with the class of car. Then the second image below that with the class of motorbike. You can see we have the images here, but they're looking weird right now. So let's add some styles to them. I'll go to my CSS and target the car image first. Then I will add position absolute so that we can control the position of the image. Then I will add left 300 pixels and bottom minus 50 pixels. Then I will add with 200 pixels to make the car image smaller. And now you can see the car is looking much better. Now, let's do the same thing to the motorbike. I will go back to my CSS, copy this, paste it again, and I will target the motorbike in this case. Then I will change left to 700 pixels so that it will be a head of the car. Then bottom to 55 pixels. So it will be a little higher and give us that nice 3D feeling. And finally, I will change the width to 150 pixels. And now when I go to the browser and reload, you can see we have exactly the driving animation we wanted. And we can control it. So we can make it faster or slower by changing the animation duration. I will go back to my CSS and make it faster by making the animation duration ten seconds. And now you can see they're driving faster. Now. Before I finish the lesson, I just want to let you know that I got the background image from this side, three pick.com, which has tons of free images you can use. And I got it using this link that you can just find it in the Resource Files.