Learn CSS Animation In 15 Minutes

are you feeling overwhelmed by css animations if so this is the perfect video for you because i'm going to break down everything there is to know about css animations and also if you're feeling stuck with css selectors or confused about all the selectors that are out there make sure to check out my full css selected cheat sheet down in the description below that's going to give you all the information you need to know about selectors let's get started now [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web 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 like this now to get started i have just some really basic html and css i have a parent and a child div and as you can see the parent is outside the child so the child is inside the div this parent has this dark blue color as you can see on the right and this child has the red color then whenever you hover over the parent all i'm doing is transforming the child so essentially i'm moving it all the way to the right side of the parent and back again depending on if it's hovered or not we want to talk about animations because right now this is really jerky there's no smooth animation between these different states 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 and then there's the full on animation property which is a bit more complex 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 because this can be done by just a simple transition so how do you go about writing a transition well all you need to use is the transition property in css and the first mistake most people make is they put the transition on the hover or the place where the transition is happening but in our case when we're hovering over the parent the transition will be applied 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 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 as you can see there's multiple transition properties there's timing function property duration delay and then just the transition keyword itself 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 transition just combines all four of these properties into one and it's generally how you're going to write transitions so by default a transition is going to transition all of the properties on your element it'll have all written here but we really only want to transform or transition our transform here 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 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 you can say 100 milliseconds for example in our case we're going to say one second 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 we unhover and it moves to the left over one second if we get rid of transform here you'll see that it still works because it just defaults to animating all of our properties so if we were to for example change our background color here oops color to green you'll now see it transitions slowly from red to green as it goes across the board but inside here if we just wrote transform you'll notice that now our color transformation is instantaneous while the actual transform itself is being transitioned back and forth over one second so this is great for specifying individual things that you want to transition and other things that you don't so now i want to show you why the transition isn't put on the hover version so if we come over here and put transition on the hover just like this and i save 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 when i unhover you'll notice it instantly moves the element back that's because this transition property is no longer set on the child because this hover state doesn't exist it's as if this was not here so there's no transition being applied to the child itself so it doesn't do that smooth animation this is why when you specify transitions 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 now the last two things that we can do with this transition property are specify a delay as well as a timing function the timing function is essentially determining how your different animation is going to play out for example we could put linear as our timing function and this means that there's going to be even spacing between the beginning and end of our animation each of the frames of our animation takes the same amount of time so our object moves linearly from one side to the other if we did for example ease in out what this is saying is start out slow and end slow and in the middle be slightly faster so if i save this in hover you're going to notice the animation starts out slow speeds up in the middle and then slows down at the end and the same thing on the way back and if you want to really take this and customize it even further than just using these few preset values 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 click on this and it'll open up an editor for you where you can actually edit the exact curve 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 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 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 so if we do this it's going to start out slow speed up bounce over top and then come back we'll just copy this cubic bezier down here you almost never write these by hand these editors built into the browser are perfect so we copy this and just replace this keyword ease in out with that cubic bezier now we save and we hover here you're going to notice it starts out really slow and 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 this is how we can write these custom cubic bezier curves in order to further take our animation 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 we wanted to delay for three seconds now when i hover over this it's going to take three seconds before the animation actually occurs and then it's going to move same thing when i release it gonna take three seconds and then it's going to start the actual animation itself now unfortunately that's pretty much all that we can do with transition 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 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 which is where animations come in so what i'm going to do is show you how to take this current transition we're just going to simplify this a little bit we're going to change this to ease in for example 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 and then how we can take that a step further and make this circle around our cube here so to convert a transition to an animation all we need to do is write out the word animation and with animations you write it in the place where you want it to happen in our case here on our hover so we write out animation as you can see animation has a bunch more properties than the transition does you can see it has all these different properties and then the animation keyword which combines all of them together 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 this can be anything that you want it's just a custom name so you know what this animation is we're going to call this left to right because that's what it does it moves from the left to the right then just like with our transition we can specify our duration in our case one second we can specify a timing function in our case ease in we could even specify a delay if we wanted that three second delay but we're just going to leave that off for now this right here is all 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 well that is where keyframes come in so if we just come down here type in at and then keyframes this is just like if you did a medius query you put the at symbol and then the word keyframes 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 again this can be anything you want it just has to match your animation's name this is how they get linked together then we put a set of curly braces and in here is where we define our keyframes and keyframes essentially determine what our animation looks like at all of the values between zero percent and one hundred percent complete so in our animation at 100 we want to have this transformation we could say 100 and we can just copy in here our transform translate x to 100 this is what our animation looks like at 100 and by default if you don't specify anything for example zero percent it'll just default to whatever the values here are for our child itself 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 you'll notice something weird as soon as it gets to the right hand side immediately the animation jumps back to the very beginning let's try that again we hover it gets to the right and then immediately it defaults back to where it was at the beginning the reason for that is that animations what happens is they do everything inside of their keyframes in our case all we have is one hundred percent because our zero percent is this default up here and it's saying okay do all this animation and as soon as the animation is done it removes all of the properties it added so it goes back to whatever the default is here inside of child which in our case our translate is not applied which is why it's in the default position if we wanted to for example keep this transform and keep this extra translate what we need to do is tell our animation that so what we can do inside of animation is we want to say that this animation is forwards this property is called the animation fill mode this can either backwards both or forwards and really all this is saying if you specify backwards it says before my animation starts apply all the properties at the zero percent keyframe which we don't even have if we specify forwards it says after my animation is done keep all of the properties inside of the 100 keyframe and finally if you use both it will essentially combine backwards and 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 forwards keyword is saying i want to keep all the properties in the 100 percent keyframe so it's keeping this transform here another really important thing about css animations that most people don't think about is performance and it's actually really easy to make poorly performing css animations so i made an entire video about css animation performance which i'll link in the cards and description down below so now i want to take this a step further as i said i want to move it around here in a circle from top left bottom left bottom right top right so how would we go about doing that well let's just come in here we're going to write out different keyframes we're even going to define our zero percent keyframe even though we really don't have to we're going to say transform translate x and we want this to be zero this is going to be our default value and a hundred percent we want this to be in that top right corner so this is already correct now we need to define our intermediary keyframes so we're going to have 33 percent and we're going to have 66 percent so at 33 all we're going to do is take our transform we're going to translate the y direction 100 this should translate us down 100 and let's just save this and see if this works if we hover you'll notice it moved us down that 100 which is what we expected then at 66 percent we need to essentially have our transform contain both our translate x of 100 and our translate oops 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 all the way to the top right in order from bottom top left bottom left bottom right and top right if i remove and go back you can see that it is doing that full loop again which is exactly what we want but right now we've pretty much only taken what we can do with the transition and then slightly improve upon it by adding additional keyframes inside of here we can actually do so much more with animation and let's just remove this transition up here this hasn't been doing anything but just to be super clear that we're working with just our animation there we go it's working as expected with animation we can go a step further than just doing a complex animation we can also tell our animation how many times to repeat the order we want to run the animation and so many other things so for example we have something called an animation iteration count we can say how long we want the animation to be repeating we can say 3 for example this is going to cause our animation to occur three different times so if i hover you can see it moved around around and around and right now it's doing this little jarring thing where it's jumps back to the beginning repeats the animation jumps back repeats the animation if instead of doing that jumping motion we wanted to make it go around and then back and then around we could specify the direction of our animation and there's a direction called alternate which essentially just says when i get to the end of the animation for the next iteration go backwards so if i hover this you can see that it's moving back and forth and it does that three total times one time forward the second time goes backwards and the third time goes forward we could also specify a delay here and as long as we put it after our duration doesn't matter we just come in here and say well we'll do three seconds so when i hover there's gonna be a three second delay and then our animation is going to occur as you can see it does it three different times and then it stops so we can combine a bunch of different stuff with animations but we can take this a step further let's say that we want this animation to occur infinite times with no delay and instead of doing this on hover we actually want this animation to be permanent so we'll just put it up here and now when i save you'll notice that this just does the animation over and over and over again and since we're doing it infinite times it's never going to stop we can actually make this animation play and pause based on something called the animation playstate i believe it's called animation play state and this determines whether the animation is running or paused we can set it to be paused whenever the hover state is active so now the animation is running and i hover it'll immediately pause the animation 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 state here to paused running is just the opposite of paused it's essentially the default that means the animation is currently occurring the final thing that i want to mention if we just change this back to paused is that 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 the way down to 100 and say the background color is green and now if i save you'll notice throughout the animation it's changing from red to green and even though i didn't supply a background color in this intermediary state it's just saying from zero percent start at red and then slowly animate all the way to green at one hundred percent and if i threw something in the middle here for example fifty percent i could say background color of blue now what's going to happen is it's going to animate from red to blue the blue will be right in the dead middle here if i hover you can see it's blue right in the very center it'll go to green back to blue and red and it'll do that over and over and over again you can do a lot of really cool things with these keyframes essentially what happens is it just does a transition between each one of these keyframes that's really all that's occurring and that's all there is to animations in css if you enjoyed this video then you're going to love my free css selector cheat sheet link down in the description which is going to show you all the selectors you need to know in css thank you very much for watching this video and have a good day

Channel: Web Dev Simplified

Views: 284,063

Keywords: webdevsimplified, css animation, css animation tutorial, css keyframes, css keyframe, css keyframes tutorial, css animation examples, css crash course, css, css tutorial, css animation crash course, css transition, css transitions, css transition and animation, css movement, css transition tutorial, css animation website, css animation beginner, css animation tutorial 2020, css animation 2020, css 2020, css anim, css animate, css move box, css animate text, web dev, wds, js

Id: YszONjKpgg4

Length: 15min 33sec (933 seconds)

Published: Sat Oct 24 2020