CSS Animations in 2019 | Beginner To Pro Tutorial

CSS Animations in 2019 | Beginner To Pro Tutorial



what about by my name's Tyler Potts and welcome back to another video in this fear we're gonna be covering CSS animations we're gonna be using basically simple animations transitions and keyframes to create some different animations this is one example of a transition utilizing CSS gradients to basically create this cool burn effect like it's sliding from the left to the right and also if we refresh page when we first load in we get this animation where once it loads where it slides in and everything comes in piece by piece so we're creating that in our video today so let's get into that every bite before we get into doing the actual thing I just showed you I want to just go in for a few basic things so let's create a main CSS file here and we're gonna just quickly reset the body for us a margin marjan margin:0 padding:0 background color it's going to be equal to f FC 0 0 font family oh that's not font family font family is going to be equal to anything really robo to helfet tick we'd like to help out to cut real Arial and son so we didn't need to put that we could let you put none for this example I don't know why I did a full stack okay now once we have done app settings good nice so let's style up our main let's give it a a padding of 25 pixels a width of 400 sorry no whit needed a margin:0 auto a height of a hundred vertical height so let's press this and so if I say good often the height on it and let's add a box sighting off for the box so it just an overflow it's actually add a width off a hundred percent and a max width of 768 pixels swap the underneath okay now that's sorted let's move on to the next bit which is the box so let's get this box we'll get a width of 200 pixels and a height of 200 pixels its background color it's gonna be equal to one seven one seven one seven unless it's so so we've got a box it's very basic box it's not doing anything right now so there are two different ways of doing animations in CSS two main ways of doing animations in sis the first one being the transition property so we could add onto this box transition and we can give it a second so we'll say transition we'll say all for half a second each time so now we can add a let's say a hover effect onto so when we have focus box we want to say the background color goes from the current gray to a really really light gray so if I hover over this box as you can see it goes to a light gray and back to the dark gray and that is one way you can do transitions or animations you can also do other things so we could set the we could do a so if we take a position relative relative and we'd say it's left so you put a savory and here we say it left its equal to 20 pixels and actually said move slightly to the left or to the right and very push sit at from the left 20 pixels and there you go so that is how you can manipulate stuff we're at a top – we'll say top 20 pix and we'll add in the top here top 20 pixels now let's watch that move so oh when we do that for height on it why is it not moving for some reason it doesn't want to go down oh my bad I set the top equal to 20 pixels to start with hey Gabe so now moves in a diagonal direction down towards the right bottom right and status basically how you could do transitions we can also add a different way of doing it so as you can see this is quite a it starts off quite fast and it ends up going a bit slow to us yeah now it's called ease so we could set a timing function we could say ease in out so this is basically gonna say it's gonna start off slow and to be fair we need to make we need to up this to actually see so let's move it 50 pick up we'll say a hundred pixels that's it safe and now let's hover so you might not notice I think so if we set this so there's different modes the first one I like to go for it's linear so this means it's it moves in a linear pay so it just it starts off at the same speed and finished at the same speed as you can see there's no change in their speed next week say ease it and eating basically starts slowly so as you can see it starts slowly and speeds up we could then say ease out which is the opposite it starts off at a decent pace and slows down towards the edge next up we can also do in out which basically start off slow speeds up towards middle and slows down towards the end as you can see and then there is enough a way of doing timing function which is called the cue be a two cubic Bezier so these ones have loads different examples already put in here but I have never used these I'm just quickly looking at overshoots so this one I believe as you can see it goes backwards before it goes forwards just kind of cool if we set this to let's say 1.5 kind of ask the little bounce on both sides now so now it's kind of bouncy it's not very cool but you can change this so there is saying there is a tool in chrome if I open up this console and let's place it to the bottom if we go to the elements and we go down to how do I find the timing I'll say I need to select the box an ADA because cubic Bezier if we click this it gives us a way to modify it so we can we can move that bouncer now if I have fond that the bounced changes we can set it back to this and let's say this really high up so this could be insane bounce so now if I have as you can see it shoots off into a round direction so this one way you can control your animation it basically says it basically controls how crazy your animation gets so that is pretty cool so cubic bezier is pretty awesome they stock it back to the way actually one we're doing we don't need it let's close it so that is one way let's remove that and we'll just go leave here at nothing so that's one way you can animate your box or any element on the page there's many again there is loads of things you can so let's say a passer T is equal to 1 and then over here we'll say a passer – you seal 2.1 hits safe and now when i have 4 as you can see it's it fades out to 0.1 pass see there's loads of different properties you can animate you can probably go ahead and find them out so there is enough away so let's comment out this stuff here let's close that let's remove this and the next one is keyframes and with keyframes she basically you give it a name she give it keyframes then you give her name we'll give this one slide in and basically we're just gonna say so we're gonna give this a left of – a hundred percent which should make it too P after screen now we're gonna say there's two ways to do keyframes is in weight from dude we can give a from and this basically says this is from left – 100% and then we could say – left zero so we have save and no Cap'n's because we have to cool it in here so we're gonna give in animation we could do it device the animation is too short and we've done it's you by animation and name and I think all we can do in the the different properties so we're gonna do it div property so I'm give it a name and this one's going to be called slide in and then we need to give it a duration which is how long it takes duration and we're going to say one second it's it's a fan – it comes in and it disappears the reason it disappears is because the animation set to reset once it finishes so once it finishes it goes back to the default values now we can change it by the animation film mode and we've set it to forwards so that means once it's in it now sets its position to where if we went to so enough away to get to a position as we can set this to see Robeson and we say it goes to a hundred percent so now it does the same thing zero percent is the from and 100's are two but now we could add in an extra 50 percent Midway unless you say left we'll say it goes to actually we'll set this equal to 90 percent and we'll set this equal to ten percent so it's like balance us out slightly so actually it goes slightly over and then comes back and now it's enough away we could do it so you can set this dish can be one percent two percent so you can set you can go you can add as many of these should once-a-week say 10 percent and 10 percent will set this equal to maybe – 20 percent and then 50 percent will sell it back to – very N and so forth so this see it kind of has a tea I don't know what animation is it's not it's not very good again but it's just one way one example of doing it so there is loads further properties we can add an animation delay so this gifts it will say sir 0.5 seconds so now when we hit save it waits 0.5 seconds before doing the animation enough one would be animation so actually only happens once we could add an iteration count and we could say so as you can see there there's an infinite thing which means it will go on forever so now bounces in bounces back it keeps bouncing back in and out now we could set this to that say free so we want to happen free time so that'll go once twice free time to then it will stay where it is so we're gonna set we're not gonna set that we're just gonna I was showing off and enough one is to timing function so just like the cubic Bezier and stuff we did there we could set this to we could set this to again ease in out so it starts off slow and then it comes in slow week set to ease in so only comes in slow again we set to ease out and we said to linear which is a similar speed and then we could do our cubic Bezier let's just do this one hit save and you can see it got added a little extra bounce there so yeah the timing function is actually one of my favorite things about animations because you can do so much crazy things with just the cubic Bezier s they call it and let me show you how you do D well actually there is a play state which says fits playing or not playing so running or paused if it's paused and we hit play it's not good do anything if it's running and we we let go actually see it starts running so this isn't the only one we could we can comment this out and we can write the shorthand version and in the shorthand version we give the name again to slide in we give it the time we want it to take some one second we can give it a delay it's 2.5 seconds and then we said to be four words if we hit save as you can see that all happened so if we refresh let's set this to be 2.5 times so we come at so you can fill that delay now and then it comes in just so you can see the deliah to work so that I think 0.5 really did it any justice oh we can just get rid of that calf and just have that and that is that and then we could add in let's say Olivia so it comes in linearly again this is just a shorthand way of doing it you could do it any way you want whichever way you prefer I prefer doing it well mmm it depends how think some days I do it differently I'm never consistent don't don't judge me try and be consistent people so yeah we moved him from the left I see – 100 % / – 0 % with some dodgy foul use going in and out create some weird effect but again you can you can do loads with this you don't have to do up we can give this a transform and we could say rotate and we set this up to zero degrees to start with and let's copy this and let's say a 50% way it's partly and we want to give this 45 degrees and then by the time it's finally back in we want to set it to 360 degrees it's as you can see it like spin sin and then stir some weird thing we could also set this to zero so it would do things slightly different there you go so it kind of like pivots it like tilts in and then bends back and you can start getting crazy with this so you can say so not only transform rotate we could say translate on the y-axis and we can say move it 200 pixels down and then this is safe and actually see it moved down I believe it came back up as well but if we go down here so we said 200 and then let's set it to 200 a moves all the way down there and then it sits down here so it's kind of cool you can do loads of cool different things with this but now let's do put into a practical situation so this was me just showing you how to use it now we're going to actually pull it into a more for practical situation so first things first let's remove this in the box we're not gonna be needing it it's it's safe and the rest can stay the same let's go into our index and let's create some markup so we want the main and wanna h1 with the class of title we don't want to say CSS I'm gonna give it a span which has animations in there it's safe I never go to CSS animations it's there let's then add a P tag with the class of content and give it a lauren 50 nothing that works pretty well to save there we go par Texas now in there and then finally let's give in a href can be nothing and this will say fancy button and let's give this a class equal to button and there we go pill fancy button there let's go style this stuff up hello computer you gonna wait sorry my Mac was being funny there okay so we've got our main let's now get our title and we're gonna give this a position set most things if you want to affect the left right top properties you need to give it a relative or an absolute position or saying summary you can't just leave it as static house it'll never move so let's get a color off one seven one seven one seven let's give a font size of five six pixels yeah looks good less text-align:center and then font way of nine hundred and then margin 15 pixels zero pixels and left so we're gonna actually well we'll leave the left out for now until we actually get into the animation part let's now go title and say span and we're just gonna say the font weight is equal to 300 pixels so there we go but it's now an or styled up in a looks pretty good after the title we want to get content so we're gonna say dot content we're gonna just give this a position:relative so we can manipulate the position of it using top left right and bottom let's give it enough for color off seven one seven one seven we're gonna give this the opacity of 0.75 so it looks like it's not being affected too much or it's less bright from less bright than the actual title let's give it a font size and we're gonna say 18 pixels that gonna be too much nothing that bout that looks nice and then let's give this a margin our 15 pixels in ceará pixels – just so it sits a bit better and that's good for content styling now let's start a bonus button styling it's a lot more important so we have to put a bit more time into this so we're gonna gift this so let me bring this up so it's not really so let's display this this block let's give it a width of 200 pixels a margin of 0 Auto to position it central and a padding of 0 pixels as you can see it's kind of moved its centre now let's give it a color of one seven one seven one seven font size of 20 pixels a text transform off upper case not up the case upper case and a text decoration off no let's then align the tech center and say the line height is equal to 50 pixels it's safe and there we go that's moves later now let's add a background let's add the gradient in which we let's add a border first a border two pixels solid and it'll be d one seven one seven one seven less is safe and there we go regard little burn but we don't get any hover effect like we want we now want to add in basic stuff for our animation so we're going to do the Huffer transition first so we're going to add a background image of linear gradient which is gonna say – right so it's gonna go from the left to the right I'm gonna say this one seven one seven one seven fifty percent and then Transpower of 50% if we hit say if I stick a cuff a half the button so we need to actually move this back so we want to say background position and we want to say 100% 50% actually I think 50% sit relevant it's safe you can see now happens because this this button has a hundred percent all weight fits the blocks but even if we move though for a hundred cents not going to change we want to basically add a background size to this and we need to say about 300 bar show amps if we add it to a hundred percent a hundred sir we hit save nothing really happens would I've set this to about I don't know my life and work but let's say we set this to 200 actually exceed the button disappears because the button is 200 pixels I don't know if that's actually how the math works so 200 percent and then a hundred percent so this is this keeps a home percent height and then two hundred percent width and now we're going to set the opacity opacity so I'm going to set the transition to just 0.5 second so any transition actually kind of happened there if i refresh I'm like Apple maybe it was just because I had it in transition just then yeah it's suicide transition everything transition doing for some reason I'm using the live server reload so it doesn't actually fully refresh the page and now we've gotta burn less ad D burn – so let's get that styling in so now we want to set the color equal to our light gray just cus basically when we have faux we don't want in the black toy for coming now to get the that style we want to say the background position and we want to move the so we said 200 percent here we want to move that to 0% 50% so it's safe and now when we have early for the bun actually could see it does the animation and that is all it is for that animation now it's just one way of doing animations you could do loads of different ones I just want the gradient was kind of nice and you can start messing around with different sort of things to do different things to animate so maybe we can go for the width and we'll set to five pixels so it's gonna look stupid but actually it grows a little too or we could say box shadow go free pixels free pixels three pixels six pixels oh no three pixels rgba and we give it a Sarah Sarah Sarah Sarah point two five hits safe now when we hover you can see a little box shadow appears below it maybe we can make that big dark let's make that fair five there we go you can see the box shadow appears underneath it which is kind of cool I'm gonna keep that in that you like that maybe make it six I don't know naturally okay it's going a bit too thick less stuff but yeah so that's that's how that was that's so really cool we can do so different things animate loads different things okay so now we're going to add the page load animations which we're going to use keyframes for so we're gonna give this the first keyframes and this could be called fade in and this is going to be for the button but actually you know a let's start let's do it from the top so we'll do a keyframe let's scroll this up as you could slide in and we're safe from because we only need to we only need it from one to the office we will say from a hundred minus one hundred percent to left of zero percent it's safe and nothing happens because again we need to add it so let's go up to our title here now we need to set the left equal to minus hundred percent because out the button else you'll see it when it when the page fire you'll see the title here and then it'll jump over there and slide back in we don't want that we want it to stay we want it to just come in from the right right so let's do the animation we're do slide in we're gonna give it the duration of 0.5 seconds we're gonna give it a delay of the same because we don't want it to instantly happen we want it we want enough time so you can actually see it happening so we don't it to happen before the pace actually fully loaded let's give it the forward property and then let's give this a cubic best yeah and for this one we say 0.5 0.5 0.4 0.5 and then we'll just say point 1 or 1.5 and this is better get allow it to bounce in a little so as you can see it bounces slightly over and comes back and that's it's now nicely there so we refresh page again as you see comes in and bounces back in so that is one way to animate the title next up we're going to focus on the actual text so the content here so we need a new keyframe now and let's go down here and say keyframes and we'll call this one for links and khaya it's not really falling but it slides in from the top so we'll just say top – a hundred percent we'll just a to top and we're gonna say zero percent so let's head up to our content now and basically we just want to say let's do this we'll use shorthand a gangster I prefer using it all Wow it's gave me ooh I think we need right here so we say fall in for about 0.5 seconds the timing function so forwards the delay which is gonna be one second now if you want to happen just a steer for animates yes the title finishes well then get the iteration count we're just going to leave that the direction I don't know what that is Oh timing function was to keep you basis will say the linear and then fill mode we're gonna give this four words so save and as you can see it just did that thing so five refresh again it stays there it jumps up and then slides down that's because we haven't sell it to be top the equal two 100% to start with so now it's not actually on infuse and now it falls in now to final one for our button we're gonna add in a fades will you say keyframes fade in and we're gonna say from again opacity zero two and opacity one so we're just going to get fade in all the way in so let's go to our burn and now let's add in a animation name so animation will give it fade in when I sell it to start for certain five seconds it can be linear I think the actual timing function then we're gonna give it a delay for 1.5 seconds so once both of the animations are finished and then we're gonna say equal to four words that's now you spell four words there we go hit save and then the burn does again so we actually need to add an opacity here of zero so it starts off fade about there you go so let's refresh so the title comes in text falls in and the bone fades in I think the button needs a whole second coming because I feel like it comes in too quickly there you go that's a lot nicer so that is one way you can do CSS animate one of two ways to century you do CSS animations just with HTML and CSS now there is you can do more with JavaScript and stuff of course you can add more interactivity to it so when you let's say click a button it does thank you well you can do that notice it's called active but you can do it so when you click button the button like spins out of control flies back and comes back and stuff like that all crazy stuff but basically you should now go away mess around with CSS animations to see what you got to come up with maybe Craig code pen and send me the link to the code pen in the comments or to our discord surf or something I'd be pretty awesome see what you guys come up with I hope you don't think in this video so how CSS animations work if you want to see a more in-depth set as animation tutorial so saying more along the lines of like animating of they see loading a page or sinks when you scroll down the image is slowly loading as you scroll parallaxing animations or anything like that then drop a comment below and I'll get on to more detailed CSS animations in the future but for now guys thank you for watching this video I hope you enjoyed if you did then hit that like button if you want to see more then don't forget to that subscribe button and here's a little tip for you if you hit that Bell notification – you'll get a notification as soon as my next video goes live for that guys I hope you did enjoy again if you have any feedback drop in the comments below or hop over to our discord further links in the description and leave a comment there just for everyone who doesn't know I do have a patreon you can go and support me over at patreon and again the patreon link will be in the description now what we're talking about patrons guys thank you for watching and here are our patreon always do it on my own so I gotta get through it and the only thing I know is to love what I'm doing never give up never slow till I finally prove it never listen to the nose I just wanna keep moving keep my head up when I act head up that's a fact never looking back gotta keep myself in check keep my head up staying strong

6 thoughts on “CSS Animations in 2019 | Beginner To Pro Tutorial”

  1. Which program are you using? I want to start learning HTML & CSS, what would you recommend? I'm thinking Dreamweaver

  2. Great overview – I learn't a lot. That Chrome dev feature to play with transition easing is cool. Never knew that was there.

Leave a Reply

Your email address will not be published. Required fields are marked *