CSS3 Animation & Transitions Crash Course

[Music] hey guys welcome to the CSS animations crash course this is a beginner friendly course and we're gonna look at things like animation with keyframes as well as CSS transitions ok we're also gonna build a pretty simple landing page with some entry animations so if you're brand new to CSS I suggest watching my CSS for absolute beginners video which I'll link in the description this is kind of a good next step after watching that video basically there'll be three parts we're gonna start off with learning about keyframes now we're not gonna build something that is that actually you know something you would deploy we're just gonna test some stuff out you see we're gonna move objects around and change the shape change the colors things like that then we're going to move on to transitions which are basically animations that need some kind of trigger such as a hover so you'll see when we hover over this it'll actually change the shape it'll change the color and it will rotate all right now these are obviously not real projects it's just to learn once we do that we'll go in we'll create this landing page where if I reload you'll see the heading comes down the paragraph comes in and then the button fades in and we have a little transition effect here as well alright so that's what we'll be doing this video guys hopefully you enjoy it and let's get started I want to give a huge shout out to today's sponsor male tag male tag is a Chrome extension that allows you to track your emails in real time for free it also lets you track other cool things like link clicks email reopens and even the device that was used to open your emails be sure to check out male tag by clicking the link in the description below alright guys we're gonna go ahead and get started here I have Visual Studio code open on the left here and google chrome open on the right I have an empty folder called CSS animations okay so like I said we're gonna break this up into three parts we're first gonna look at an experiment with CSS keyframes then we're gonna move to transitions and then we're gonna build our little landing page alright so first thing we'll do is create a new file and I'm gonna call this key frames dot html' okay so that's our HTML file and then we're gonna create a CSS file to go with it which we'll call keyframes dot CSS all right and we'll just put some standard HTML and they are using Emmet whoops this is not the right file that's CSS we want to go into HTML and put some basic HTML tags let's say keyframes and animation and all we're gonna need here actually in both the the keyframes and the transitions HTML all we need is one div with the class of box everything else is gonna be done in CSS so let's save this now I'm going to open this you can just open the HTML file locally or you can do what I'm doing and use an extension I'm using live server for vs code if you want that you can just search for an install it and that allows you to just right click and say open with live server alright so now we're we have it'll open over here alright so I'm gonna go ahead and just close this up okay so now we're gonna go to our CSS file and from here let's just add a body style I just want to make the background dark so I'm gonna say background 333 which is a dark gray and you see the sense of using live server it's gonna auto load alright so let's add the box class which is the div we we added and from here we want to give it a background let's say background white let's give it a width of let's say 200 pixels a height of 200 pixels and there we go there's our box okay I also want to position it relative we're gonna be moving it around all right so now we want to start working with the animation so there's a couple different properties that we're going to be using here the first is animation - name okay and you can call this whatever you want I'm just going to call it my animation alright and then what we want to do is set a duration for it so we want to say animation - duration and I'm going to set this for 4 seconds so we want to do 4s okay now we want to take this name that we created and we want to create a keyframe so we're gonna go down below here and we're gonna say at keyframes and then we're gonna put in my animation okay because that's what we chose to use your sort of space here alright now in here we want to specify different points all right so we're gonna start at 0% okay so it's zero percent of this animation what kind of styles do we want let's start with just using a background color so it's a background color and it's initially white so that's what I'm gonna use here is white all right and then let's go right to a hundred percent so when that when it's finished okay 100 percent is gonna be when it's finished we're gonna say background yeah background color also set to white okay so it's going to start white it's going to end white now in the process of the animation within this four seconds here or whatever you define we want to change the color okay to some different colors so let's say a 25% we want to set the background color to red okay I'm just gonna copy this so we'll do 25% we'll do I'm gonna paste this in two more times we'll do 50% okay so at 50% through let's change this to green and then at 75% through let's set this to blue all right so I'm gonna go ahead and save this and you'll see it goes red green blue white okay so it goes through it and it's gonna do it all in four seconds if I put this to one second and save you'll see it'll go through it in one second if I put ten seconds it'll go very slow okay so it's gonna fade through those colors so that's how keyframes work pretty simple now obviously you can do other properties aside from just the color so what I want to do now is in addition to changing the colors I want to move it around a little all right so I'm gonna set this back to four seconds and in addition to will go to 0% and in addition to background color we're gonna set the left to zero pixels okay so basically we want it starting here zero from the left and then we want to go from the top zero pixels okay so we just basically wanted to start where it is now and then 25% through we're gonna say from the left we want it to go 300 pixels and from the top we want it to go zero pixels because we wanted to stay at the top we basically just want to move it over all right now at 50% we want it to go down okay because I wanted to go in a square motion so once it's at 300 pixels left top zero we want it to go down 300 pixels and still at left 300 pixels so let's go ahead and add that I'll say left 300 pixels and top 300 pixels okay and then from there we wanted to go over back this way so it'll be zero left because it's over to the extreme left but it's still 300 pixels down so we're gonna set this to left let's see it'll be left zero pixels and it'll be top 300 pixels and then the final position is going to be back where it started which will be zero zero okay left:0 top:0 so let's do that top zero pixels and let's try it so we'll go ahead and save it it'll it'll auto load goes down back and up alright so that that is our animation so you can see we animated the color and the position now let's do the radius which will actually make it morph into a circle alright so we're gonna add to this and we're gonna say border radius and we're gonna set them all to zeros so zero zero zero zero so top right bottom left and let's go to the next one here okay so this one we're gonna set the top to 50% and then zero zero zero alright and then at this point which is the 50% we're gonna set border radius and we're gonna set it to 50% twice and then zero zero and then here we'll say border radius and it's gonna be 50% three times and then zero and put a semicolon there and then for the last one here we're gonna say border-radius and it's gonna be 50% all around so we'll just go like that all right so let's save and it's gonna go it's just gonna morph into a circle as it goes around all right now there's some other properties we can use so notice how it only went around once and it's stopped so you can actually set the the iteration count so if we go up here and we say animation - iteration count and we can set it to whatever we want let's set it to two and let's save and it should go around twice okay so it'll stop after two times and then you can also set it to infinite I spelt that wrong didn't I should be an eye so infinite and it'll just keep going okay we can also delay the animation so if we say animation - delay and we set it to two seconds let's save that and it'll wait two seconds and then begin okay we can also set the direction if we say animation direction and we can say reverse so now if we save it'll delay two seconds and then it'll go the other way so notice that it's now going counterclockwise alright and then we can also set this to alternate so what alternate will do is it'll go one way the first time I'm actually going to comment the delay out and then it'll go the other way okay so it's gonna go clockwise and then counterclockwise alright let's see another thing we can do is the timing function so if we say animation where is its timing function and we can set it to basically ease in or ease out change the way that it moved so if we set it to linear I'm actually going to comment out the dirt the direction here so it's saved that and now you'll see that linear it's it's basically at the same speed all the time okay which starts and stops at the same speed we can also do like ease in we'll save that and now you can see it's easing in it's basically starting slow and ending fast and we can go ease out where it'll start fast and end slow okay ease out and then we also have ease in and out which I believe is the default okay it'll it'll basically you know start slow and end slow so it'll ease in and out all right and there's other ones as well if you want to check out if you want to check out the documentation at mdn or whatever it is but I think that that's good let's go ahead and stop this I'm just gonna say one for iteration it's kind of making me dizzy now if you want it to to not reset at the end you see how it goes into a circle and then it just kind of goes back into a square if you want it to stay as a circle or whatever type of animation you're doing then you can do animation what the heck is it animation I feel exactly what it's called fill mode yeah animation film no that's not it or is it yeah animation film mode forwards alright so if we go ahead and do that when it gets to the end there you'll see it'll actually stay as a circle okay let's see I think that's pretty much it if you want to experiment with this and you know maybe you want to take away the the positioning and just have it morph into a circle or or something like that or used to use some other properties maybe the opacity but you get that you get the point you can basically just change different properties inside of your keyframe for your animation alright actually let's try it without the without the movement I'm just going to comment this out and copy it and then we'll just take out the positioning all right so we'll go ahead and try that I'll save and it'll just morph into a circle which is pretty cool okay so I'm gonna save this and I'll have the link in the description for you guys so you can download it now we're gonna work on transitions okay so I'm going to just close this up I'm gonna copy the HTML here and then we're gonna create a new file called transitions dot HTML and we'll paste that in and we're just going to change this to title the CSS transitions and we're going to point to a file called transitions dot CSS okay we're gonna leave that the class of box and then close that up create our CSS file transitions dot CSS and let's go to transitions dot HTML and we're just gonna get a blank page so again I want to make the body dark I just think it looks a little cooler so we'll say background 333 and then we're gonna take our box class and we're gonna add some stuff here let's do the background will say background white and let's do a width of 300 a height of 300 but I should be putting spaces here let's put position:relative and I want to set the margin Auto I want it I want it to go in the middle and then I'm gonna set from the top 200 pixels all right we'll save that now we have a white square in the middle so as I said before transitions are a little different because they need some kind of trigger this is usually a hover or an active State a focus State something like that so we're gonna work with hover alright so let's go ahead and say box hover okay and then we're gonna change some values here let's change the background color will say background red alright so even without adding a transition if I go whoops this shouldn't shouldn't be a space here if I go and I hover over it it's gonna turn red but there's no transition there's no middle point it's just it's it's straight white to red okay so transitions allow us to give us some some some flow to it I guess I don't know if that's the right word but to go you know from from white to a lighter red to a tool to a docker add to a darker red until it gets to the actual red color okay same thing with some of the other properties and I'm actually gonna paste in here just all of the different properties that you can use with transitions okay basically they have to be properties that have an identifiable halfway point so it can't be just like for instance display it's either none or block there's no in between okay if you want to do some kind of fade then you can use the opacity okay but you're not gonna use display so let me just paste these in just so you guys have it you know color positioning the width spacing font size all of this stuff has some kind of midpoint it's not just one or the other all right so you can use any of these in a transition so let's go ahead and add to our box class here we're gonna say transition property so we want to define what property we want to actually add to this transition and it's going to be the background okay we also want to set a duration so I'm going to say transition duration and we'll set that to let's say 3 seconds okay and then I'm gonna save that and then when I hover over it you'll see that it fades in to the red instead of just going white to red automatically it fades in and then fades out when I leave the hover State all right and it doesn't have to be hover active we can use active which is when we click on it so if I click if I keep clicking you'll see that it'll get darker and darker alright and then if I stop clicking it'll go back but I'm just gonna keep it at hover okay and I'm gonna change it to one second actually it's a little too slow alright so that's the background now we can add other properties as well so let's do the let's do the border radius so I'm going to put a comma here saying we also want to transition the border radius so border radius and then down here in the box hover we're gonna say border radius and we're gonna set this to 50% alright so let's go ahead and hover over it and now you'll see it'll morph into a circle and back which looks kind of cool alright now we can set things here like delay we can set the transition delay let's say we wanted to lay it to seconds so now whoops what I do alright so it actually fades in as well but if I hover hover over it it'll wait two seconds and then it'll go okay you can also change the timing function for transitions just like we did with the animations so transition timing function and we can say linear there's a bunch of them but you can see that the it also delays going back but you can see the movements a little different we can do like ease-in ease-out it's two E's in I'm gonna take the delay off actually all right so kind of ease is it you see how it starts slow and then it ends up going fast so I mean there's a lot of different timing functions you can look that stuff up if you want to check the different ones out but yeah so that's transitions now if you wanted to set for instance a duration to be different for the background and then for the border radius we could add a comma here the first this would be for the background and then the border radius we'll say three seconds okay so we can separate the duration for the different animations so you'll see in one second it'll go to read and it'll take three seconds to actually make the circle and you can do the same thing with the delay if you want to delay the border radius four seconds you could do that and the background would only delay two seconds okay so let's do a rotate or transform rather so we're gonna add up here we're going to say transform and down here we'll say transform and we're gonna say we want this whoops we want this to rotate Y and let's rotate it 180 degrees so we'll save that and I'll go and hover over it and it'll do the little rotate which is cool now if you don't want to separate like if you don't want different durations or delays and stuff if we want just one second for everything like that then we don't have to specify all these properties we can actually you know I'm gonna do those just comment this out so you guys have it but we can just do all so we can go like that and save and you'll see that it'll all just work together okay it'll cradled it'll animate all of these and it'll all have the same duration and stuff okay so I would encourage you guys to just experiment with this you know these types of videos where we're not building an actual project this is for learning purposes for you to you know try to get your own ideas and create some cool stuff you know and do do some a little more research you know this is just a kind of a beginner type crash course there's a lot that you can do all right so that's for that's it for transitions now we're gonna build our little landing page so I'm gonna create a new file and I'm gonna call this landing dot HTML and let's create another file called landing dot CSS okay so the HTML we're gonna put in our standard tags here title will just say landing page and we're gonna link a stylesheet and it's gonna be landing dot CSS all right now for the markup well it's not going to be too difficult we're just going to put in a header and we're gonna give this an idea of showcase and inside here we're just gonna have an h1 and we're gonna say welcome to my site under the header we're gonna have a div with an ID of content and I'm gonna give it a class of container as well okay and then we're just gonna say lorem 50 tab which if you're using Emmet like I am it'll just give you 50 words of dummy text okay and then we're going to put in an a tag and we're gonna give this a class of BTN all right that's not really gonna go anywhere and for the text we'll just say read more all right so now we'll go to landing dot HTML and it should look like this so let's go to our landing CSS and we're gonna add some styles here I want to zero out the margin and padding for everything so I'm just going to use a reset by putting an asterisk here and saying margin zero and padding:0 okay and then for the body let's see for the body we're gonna add my well we don't need margin:0 let's do font-family so for font family I'm just gonna say arial helvetica sans-serif we're gonna set the background color let's set that to a hexadecimal value of 1 2 4 7 5 F which is a bluish color so we'll save that let's set the color of the text to white and let's set the line height to 1.6 and we're gonna set text align to Center I want the whole site centered alright so there we go now we're gonna do the container okay so the the paragraph has a container class and I'm just going to set a max width of 960 pixels and we're gonna set the margin to auto so it's pushed to the middle and then we're just going to add some padding I'm gonna put 30 pixels on the left and right alright so we'll save that let's see what else so now for the showcase which is the header okay so for the showcase all I want to do is set a height I can't spell hei ght height is gonna be 300 pixels and save alright so now we have our showcase with the height now we're going to work with the h1 which is in the showcase so showcase h1 and in here let's let's set the font size to 50 pixels I'm gonna just set the line height cannot spell height today for some reason 21.3 yeah let's do 1.3 save that and we're gonna set the position to relative all right so now we want to start our animation so we're going to be using keyframes basically what I want to do is I want this to come in from the top and just slide down okay slide down to to this area here so we're gonna say animation and this is gonna be pretty easy it's gonna be easier than the stuff that we just did we'll call this heading okay and then we're gonna go right under the showcase h1 and create a keyframe so we'll say keyframes heading and we're just gonna have two points so we're gonna have 0% and we're gonna have 100% alright I know we had a lot more the last time but we only need two points when it's when it starts and when it ends here so we wanted to start above the fold right here where it's kind of like out of sight so what I'm gonna do is I'm gonna set top to negative 50 pixels okay and then when it's at a hundred percent I wanted to move down 200 pixels so we'll say top 200 pixels whoops all right so it's saved that now it's not gonna work yet because we need a duration so we're gonna go up and say animation duration and let's make this three seconds all right so if we save that it's gonna come down and it's gonna go back to its original state okay now remember we have a property for that called animation film mode and we want to set that to four words so let's say animation film mode for words save and now it's gonna come down and it's gonna stay in its place all right so that's the first animation the next one we want to do is the content we want this to come in from the left so let's go down here and let's say id content and we're gonna set the position to relative and set animation name I'll set it to content set the duration to we'll set it to the same thing 3 seconds and you guys can experiment with this and then we wanted to stay so we're going to do the film load of four words okay and then we'll create our keyframe what I'm gonna do is just copy this and this is gonna be keyframe content and except this time we're not coming from the top or coming from the left and we need it to be way over here and it's it's it's quite wide so what I'm gonna do is set this to negative 1000 pixels okay and then for the hundred percent we're gonna set the left to zero like that all right so our semicolons in here so let's save that so that comes down that comes in and that's good all right so now we want to do the button so that has a class of BTN and let's say this this we want to display as an inline block okay we want it to go on on the next line like a block but we don't want it to go all the way across so we wanted it as inline block alright we'll set the color of the text and the button to white let's do text-decoration:none because we don't want the underlined let's give it a padding of one R M on the top and bottom to R M on the sides what else we're gonna give it a border of white one pixels and solid alright and then let's give it a margin top move it down a little bit forty pixels and save okay so right now you know it's it's just gonna be there when the site loads and that's that's not what we want so let's set the opacity to zero and that's gonna make it invisible so we can't see it at all all right and then what we want to do is add our animation so we'll say animation name is gonna be BTN we'll set the duration so duration we're gonna set it to three seconds now I don't want this to fade in while these are coming down I want it to be afterwards so we know that the duration of these two or three seconds so let's set the delay to three seconds because that's when we want this to start all right so set that to three seconds so we also want to set the fill mode to four words and see yeah we'll do that and then down here we want to set our keyframes I'm gonna copy this this is going to be BTN and instead of doing positioning for these what we're doing is opacity all right so zero percent we're starting at zero opacity so completely transparent and then by the end by a hundred percent we want it to be one which is obviously in full you all right so let's go ahead and save it's gonna animate those two three seconds and then that button comes in all right so that's exactly what we want and then just to add that little transition that little flip we can say transition - property and we're going to set it to transform and let's set transition - duration - one second and then we're just gonna add a hover State so BTN hover and let's set the transform to rotate y 180 degrees all right let's try it so we'll save you have our initial animation button comes in if we hover over it we get the little flip effect all right so hopefully you guys enjoyed this and you learned a little something and again I'd encourage you to to explore and an experiment for yourself with some of these animations and this is just a basic introduction and yeah you may want to you know look at some blog posts or you know some articles that have to do with with CSS animation if it's something you're interested in I know I've done videos on on some libraries like animate dot CSS and that stuff makes this easier I think we actually did something similar to this with animate CSS but this shows you how to do it with just you know just core CSS not having to use a library so hopefully you know you can appreciate that but thanks for watching if you liked it please leave a like if you're not subscribed and you like these types of videos please subscribe and I will see you next time so I just want to give another shout out to male tag who sponsored this video male tag is a free Chrome browser extension that allows you to track your emails in real time I've been using it myself for about a week now and I can't recommend enough on top of email tracking mail tag has a bunch of other features like desktop push notifications that alert you when your emails have been opened link click tracking that shows that people have actually clicked on the links in your email and a ton of other cool features again all these features are completely free be sure to check out male tag and click that link in the description

Channel: Traversy Media

Views: 352,640

Rating: 4.9686184 out of 5

Keywords: css, css animation, css animations, css keyframews, css transitions, css3, css3 animation

Id: zHUpx90NerM

Length: 36min 19sec (2179 seconds)

Published: Tue Oct 31 2017