Learn CSS Animations In 20 Minutes - For Beginners

there are two ways of creating animations in CSS Transitions and animations transitions wait until they change in a property occurs and then allows those changes to take place over time without a transition any changes in a property would take effect immediately transitions should be used when properties are changed interactively so for example in CSS a property can change when hovered on and when focused on animations however provide keyframes for more control over the animation and allows us to create complex animations on a frame by frame basis use animations when you want to create complex animations that just work without having to wait for properties that change interactively you can also create stunning animations by combining both Transitions and animations together in this example I used a transitions to make boxes appear when hovering over the orbs and I used animations to make the Rings rotate in a circle I also used some JavaScript to track the position of the mouse and move the Rings towards the mouse creating a tunnel-like effect this example barely scratches the surface of what's possible with animations and in this video I'm going to provide you with all the fundamental CSS animation Concepts you need to know to start getting creative and building beautiful CSS animations for your own projects to create a transition we first need a component that has a change in property in my HTML I have a button with the class of button in my CSS I have the styles for the button and I also have a hover State all this does is moves our button 10 pixels up when we hover over it we see this is exactly what's happening but it's taking effect immediately this is not how things move in the real world we can make the hover State happen over time by using the transition properties transition property transition duration transition timing function and transition delay the transition property defines which property the transition effect should be applied to in our hover State we are only using the transform property so in here we can say transform the transition duration defines how long the transition effect should take to complete I'm going to set it to 0.3 seconds the transition timing function defines the acceleration curve for the transition the common possible values that go in here are ease in is out is in out linear and ease which is the default the transition delay defines the delay before the transition should take effect I want my transition to start the moment the element is hovered on so I set this one to zero seconds when we hover over our button we see the button moves 10 pixels up over time and this is a lot better than before but in our code what we can do is instead of using these four properties we can use the shorthand property transition in the transition property we can set the same values that we passed in our four properties and also in the same order so transform 0.3 seconds is and zero seconds delay hovering over our button we see this works great but we can shorten our code even more if we have a delay of zero seconds then we can remove it entirely also is is the default timing function so we can remove it as well now when we hover over our button we see it's still working perfectly sometimes you might have more than one property changing for example maybe on Hover I want the background color to match the Border color and also maybe I want the color of the text to be white when I hover over my button the only property that has a transition effect is the Transformer so what I can do is inside my transition property I can comma separate the different properties I want animated the background color property with a 0.3 second duration and the color property with a 0.3 second duration as well now when I hover over my button everything is being animated but back in our code if I have more than two properties on our hover State comma separating each property would take a lot of time especially if they shared the same duration timing function and delay in those cases what we can do instead is have nothing being comma separated and on the first value instead of defining a property we can replace it with the all keyword now everything is going to have a transition effect applied to it to create an animation we first need an element that we want to animate in my HTML I have an H1 element with the class of heading 1 to animate this heading I can head over to my CSS file and add a keyframe the Syntax for this is ADD keyframes and curly braces in between the ADD keyframes and curly braces goes the name of our animation I'm going to call it slide in left inside the curly braces goes the animation I want my heading to be positioned on the left side of the screen and then slide into its original position to do this I need to define the rules from the beginning of the animation to the end of the animation inside the curly braces I can add the values from and 2. from represents the beginning of the animation or zero percent completed and the two represents the end of the animation or 100 completed they both have curly braces I want the animation to start 200 pixels to the left so inside the from curly braces I can add a transform of translate x minus 200 pixels then inside the two curly braces I can add a transform of translate X and set it to zero I set this one to zero because they translate X of 0 will bring the element back to its original position looking at our heading we see nothing is happening this is because we didn't tell our heading to animate I can select our Heading by its class name and in here go 7 animation properties animation name animation duration animation timing function animation delay animation iteration count animation Direction and animation fill mode the animation name property is for selecting the keyframe you want to use to animate the element we created a keyframe called slide and left so in the animation name property as a value I will pass it slide in left after setting the animation name property we see our heading is still not animating this is because we need to set the animation duration the animation duration property sets the time it takes for the animation to complete one lap when you create a keyframe animation you're defining the rules of the animation from zero percent to one hundred percent this property defines how long it takes to animate from zero percent to one hundred percent the default is zero seconds but if I leave it at zero seconds our animation will never run so I'll set it to one second now we see our heading is being animated the animation timing function property defines the acceleration curve for the animation the default is is but we have the same options as before is is in is out is in out and linear I'll set mine to ease in the animation delay property sets a delay before running the animation the default is 0 seconds and this means the animation will run right away on page load I will leave it at the default 0 seconds for now the animation iteration count property defines how many times you want the animation to run the default is one and this means the animation will complete one lap and then stop animating if I set it to two or more then the animation will run two or more times I can also set it to infinite and this will make the animation run forever I will leave it at the default value of 1. the animation Direction property defines whether the animation will run normally or in reverse the default is normal but if I set it to reverse all this will do is start the animation from the last keyframe and end it on the first keyframe I will leave it at the default value of normal and lastly the animation fill mode property that finds how the animation will apply the styles from our keyframe before and after its execution this is hard to understand without some visuals so I'll give it the default value of none I'll add a transform to our heading of translate x minus 150 pixels and I'll add an animation delay of one second the beginning position of our animation is still 200 pixels to the left and the ending position of our animation is still in the middle of the page our heading however now has the transform X of minus 150 pixels this didn't change the original position of our heading our original position is still in the middle of the page however the transform that we added in the heading will push the heading 150 pixels to the left before the animation starts and after the animation ends we can see this when we look at our heading it's 150 pixels to the left and after a one second delay the animation starts and then when the animation is over the heading gets pushed back 150 pixels to the left we can use the animation film mode property to change this Behavior if I set it to four words although the heading starts 150 pixels to the left when the animation ends instead of pushing the heading back 150 pixels to the left like before we see now the heading stays in the middle and this is because four words will apply the styles from the last keyframe to our heading when the animation ends if I set it to backwards The Heading will start with the styles that are defined in the first keyframe but when the animation ends backwards does nothing and the heading gets pushed 150 pixels to the left again finally if I set it to both now the heading starts with these tiles from the first keyframe and ends with the styles from the last keyframe with animation fill mode set to both the element is never getting pushed 150 pixels to the left because it's saying the element needs to start with these styles from the first keyframe and needs to end with the styles from the last keyframe this animation property is definitely the hardest one to understand but hopefully now it makes sense writing these seven properties each time you want an element animated is way too much work we can use the animation shorthand property it takes the same seven property values name duration timing function delay iteration count Direction and fill mode I'll just copy and paste the values we had in the individual properties into the animation shorthand name is slide in left duration is one second timing function is ease in delay is one second iteration count is One Direction is normal and fill mode is both I can now delete the individual animation properties and we see our heading is still animating like before but now we're only using one property instead of seven we can make it even shorter by removing all of the default values our iteration count and duration are both set to their default values so I can just remove them entirely and our animation will still work the same we currently have a delay of one second I'd prefer there will be zero DeLay So instead of saying zero seconds what I can do is just remove it entirely because zero seconds is the default delay value I can remove the transform that I added earlier and now that it's gone I don't really need the film mode to be at both it can be at its default value of none so I'll just remove it entirely our animation is still behaving as we intended but now look at how clean our code is currently our animation is placed on the element itself this is bad for reusability instead of selecting The Heading element by its class name and giving it the animation what I'll do is create a utility class specifically for the slide and left animation and give it the animation property with all of the same values our heading isn't being animated anymore this is because we need to head over to our HTML and give our heading the slide and left utility class this is superior because now if I had other elements that also wanted to have the same animation instead of selecting them in the CSS and giving them the animation property all I have to do is give them the utility class and they will animate the same but this way we're saving code by reusing the slide and left utility class actually we can push this utility class architecture even further at the very top of our CSS file I'll add a comment saying utility classes I'll also add a comment right above our keyframe saying animations underneath our first comment I'm going to have five utility classes the first one will be called animate with the property of Animation duration set to one second and the animation fill mode set to both the second utility class is going to be called animate dash dash infinite with the property of Animation iteration count set to infinite the third utility class is going to be called animate dash dash delay dash one second with the property of Animation delay set to one second the fourth utility class is going to be called animate dash dash fast with the property of Animation duration set to 0.6 seconds the fifth utility class is going to be called animate dash dash slow with the property of Animation duration set to 3 seconds and finally the last thing we need to do is go to our slide in left class and replace the animation shorthand with the animation name property set to the name of our keyframe and the animation timing function property set to whatever acceleration curve we want I'll set it to ease in now with this architecture the way it works is over in the HTML every element I want animated I give the animate class I want them all to be animated so I'll give them all the animate class then I can select the animation I want in our case we only have one animation the slide in left animation so in the classes of each element I'll give slide in left we see now all our elements are being animated what we can do now is use the different utility classes where we want for example maybe I want the first heading to be fast I can give it the animate dash dash fast utility class and now we see our heading is faster than the others maybe I want the second heading to be slow I can give it the animate dash dash slow utility class and now it's animating slower than the others and finally maybe I want the third heading to have a delay of one second and constantly repeat its animation infinitely for whatever reason to do this I can give it the animate dash dash delay one seconds utility class and the animate dash dash infinite utility class we can make this architecture even better by using double classes in our CSS I can prepend the animate class to each of these four utility classes and what this does is it only allows the utility classes to work if the animate class exists in the same element this can help us avoid any possible accidents that may occur when naming our classes with this way of working with animations we can essentially create our very own mini animation library and the reason this works so well is because we decoupled the relationship between the animation and the element making each animations a reusable utility class well we only have one animation so let's add a few more we can give our slide in left a brother called slide in right because this animation will be the same but come in from the right I'll just copy the code from our slide and left and paste it underneath we can rename the keyframe from Slider and left to slide in right we can do the same with the class name and the animation name property then in our transform of translate x minus 200 I can just remove the negative and now the element will come in from the right instead in our HTML I'll give the second heading the class of slide in right instead of slide in left and now we see our heading is coming in from the right back in our CSS at the bottom of the file I'll add a new keyframe called rotate it's going to start with a transform of rotate set to zero and it's going to end with a transform of rotate set to 260 degrees underneath our keyframe I can add the rotate class and give it the animation name of rotate and I'll also give it the animation timing function set to linear then in our HTML in our last heading I'll replace slide and left with rotate I'll leave the animate dash dash infinite utility class but I'll replace the animate dash dash delay of one second with animate dash dash slow and now we see our last heading is rotating from its Center Point infinitely this is what I want but say for example I wanted the heading to rotate not from its Center but from one of its Corners what I can do is in the rotate class give it the transform origin Property which has a default of Center and set it to top left now the last heading is still rotating not from its center point but from its top left corner I'll do one last animation this one more challenging than the others I'll create a new keyframe at the bottom of the file called Bounce I'll also create the bounce class now instead of later and give it the animation name of Bounce I don't need to give it the animation timing function because I want the acceleration curve to be ease and ease is the default in my HTML on the first heading I'll replace slide and left with bounce and I'll remove the animate dash dash fast utility class what I want to do with this animation is have the element bounce almost like a bouncing ball this can be done entirely with the transform of Translate Y because our animation will be vertical The Bouncing animation starts on the ground so I'll set the start of the animation with a transform of Translate Y of 0. the end of the animation needs to also be on the ground so I'll set it to zero now what we need is some in-between animations to do this we can replace our from and two with zero percent and one hundred percent and by using percentages we get more control over the keyframes because now I can set some in-between values like 40 percent which I'll set to a Translate Y of -30 pixels our heading is going up and down but not really bouncing I'll add a 50 with a transform of Translate Y set to zero and I'll add a 60 with a transform of Translate Y set to minus 15 pixels this looks pretty good but we can still make it look better currently we're going from a Translate Y of 0 to a Translate Y of minus 3D pixels from zero percent to forty percent to make it look snappier I'll add a 20 with a transform of Translate Y set to zero now what's happening is from zero percent to twenty percent we're staying at zero but now starting at twenty percent we can accelerate towards the minus 30 pixels and this will make our animation look better it's subtle but still better we can do the same in between the 60 and the 100 percent already eighty percent with a transform of Translate Y set to zero our heading definitely looks like it's bouncing and the animation is exactly like I want it however inside our keyframe we are repeating ourselves a bunch of times with all of those Translate Y set to zero in programming you really want to avoid repeating yourself so to clean things up all I have to do is remove all of the percentages where I'm repeating the Translate Y of zero and then on my zero percent I can comma separate all of the percentages that had the Translate Y of zero so zero percent twenty percent fifty percent eighty percent and one hundred percent the reason this works is because keyframe percentages don't have to be in order I could have the sixty percent be on top of everything and the animation would still work perfectly I'll bring it back down though just because I think it's cleaner and more readable and there you have it this is pretty much everything you need to know to start getting creative and building some beautiful animations yourself if you enjoyed the video I'd be honored if you liked and subscribed thanks for watching and have a wonderful day

Channel: Slaying The Dragon

Views: 677,023

Keywords: keyframes, transitions, animations, css, animation library

Id: SgmNxE9lWcY

Length: 21min 22sec (1282 seconds)

Published: Wed Nov 30 2022