Animating with CSS Transitions - A look at the transition properties

the CSS transition property is the simplest way to add animation to our website and in this video we're gonna see how to use it welcome my name is Kevin and if you're new here my channel is all about learning how to make the web I'm gonna make it look good while you're at it animation on the web is a good way to catch attention and if done properly increase user experience the most basic way to animate something is with a transition the mdns is the best transitions enable you to define the transition between two states of an element basically when the state of an element changes through things like hover focus or something else we can change its CSS property transitions make the change well transition from one state to another instead of instantly changing like this square does now when I hover on top of it now there's a handful of transition properties so let's go and look what they are and how they work so here in this code pen I just have this box that changes color on hover so I have box here I have the hover here and well we can see it changing color now this the first property I'm going to start with here is the transition duration property so on here I can write transition - duration and I can write in a number and what's important to know here is this can either take a millisecond or seconds so I could write 500 m/s for milliseconds or I could get the exact same thing by taking 0.5 s for 0.5 seconds and it would give me the exact same result the one thing to know with this though is in general I'm gonna suggest use milliseconds because while CSS can accept seconds or milliseconds JavaScript only accepts milliseconds so at one point even if you're not using JavaScript currently you're probably gonna get into that eventually and it just handy to be using milliseconds sort of as a standard through everything that you're doing so I'm just gonna switch this over to 500 milliseconds and now I can see that it actually transitions over instead of instantly happening and if I bring this up to 1000 which would be one second the same thing but slower and if I switch that over at 100 the exact same thing but really fast also just on this whole seconds or milliseconds thing in general you want your animations to happen pretty fast if I do one second you can see that's actually a pretty long animation most of the time you're gonna be at like the 250 to 500 range maybe and 500 is even kind of long so one of the another reason other than the little JavaScript thing is just you're generally dealing with small numbers anyway so you might as well just go in with the whole milliseconds now obviously this can change if you're doing complex animations where things are moving around and some other more advanced stuff but for simple animations just short durations are always going to be key be one of the things I see a lot of the time is people doing animations that are just too long or transitions I should say that are just too long for what they want to do they should happen relatively fast at the next one we look at is the transition property oops property so this is what am i transitioning so in this case it's background background and if I do that nothing will change because I'm still just transitioning my background just to show that this can actually change things if I switch this over to width so say I want to transition my width over this duration now my background is no longer transitioning my background is instantly changing because the only thing that I'm telling my CSS that I want to transition is my width so let's bring the background back on there just so it's working but let's add a second transition here transform rotate 45 degrees so now when I hover on top my square is switching over and for this we're gonna make my duration a little bit longer 1000 milliseconds so you can see that the color my background color here is taking that whole 1 second to change colors but the rotation is happening instantly so on the transition property here there are a couple of things that are important to know one of them is if I don't include it at all it's going to transition everything so you can see now that I didn't include that it's doing both of them at the same time I can also do the same thing by writing all so if I write all there we go now it's loaded in and now it's transitioning all of my properties so this is sort of the easy nice fast way to do it but I will encourage you not to do this because transitions are CPU intensive there are some that the GPU can rely on and I'm going to talk about that a little bit later your graphics processor can do acceleration on a couple of them but there's not very many and I'm going to talk about those a little bit later on but just to say that most of the time it is the CPU that's doing it and this can cause some really janky animations there's it's really easy to run into janky animations if you're using all because it's gonna start trying to animate everything and that really slows things down especially it might be working great on your super high-end computer but think of a budget cellphone we're all of a sudden you're doing a whole bunch of stuff and it's causing some issues so in this situation and my background and my transform that are both changing so what I can say is the properties that I want to change background and if I just write background we know that it's only in a change of that but I think comma separate and write transform and there we go it's loaded in so by doing this it's only going to pay attention to these two properties it's not looking at the width the height and well just the width and the height but it's it's making it a little bit easier on the CPU because it's not trying to look at everything it's only looking at the certain things that I'm targeting so if you are going to do a transition that does involve multiple properties I would encourage you I know it's longer to write but for performance reasons I really will encourage you to comma separate all the different properties that you are transforming now this next one is a really fun one and this is the timing function so it's a bit of a weird name so let's just type it in transition timing function so it's a long func I have to spell it right first function it's a long one to write out and this is a bit of a weird one especially if you're not familiar with some of the things I do believe the default is ease I think if I do that it's just going to be what we were already on now for this I'm a separate pen and both of these code pens will be in here but we can see here I have a few different animations going on now all of these animations are taking the exact same amount of time to do the difference between them is the top one is called linear we have an ease in and ease out and an ease in and out so just look at the one at the top when I hover over here and you're gonna see it stays at a constant speed the whole time so it just goes and then when it gets the end it just stops the next one down here ease in means it starts really slow so you can see it's it's slower than all the other ones especially here you can see it's really slow and then it speeds up throughout so it's easing into the animation it's going from slow and then fast and it catches up to everything else right at the end and ease out is the opposite ease out is gonna go from being very fast to slowing down at the end so it's the fastest one and then it slows right down and it was really fast and then it slows right down and then an easy note is a combination of both it's gonna start slow speed up and then slow back down at the end so and then all of them all end up at the same place at the end it really depends what you want to be doing with your animation and which one you will probably be using linear you just won't be using linear is generally it's not a natural type of animation that you might use so to do any of them you know just ease in ease out but there's actually a few more than just these ones there are some other options and if you want a faster way to work than just sort of like guessing it which one you really want to do the dev tools are a fantastic way to visualize what's going on and offer us more options to use so what we can do here is I'm gonna right click and choose inspect element if you're in Chrome that would just be an inspector man Firefox right now and here on my transition I get this little icon here Chrome it's a simple it's a little box instead of a circle but you'll get a similar thing next to where it says ease in I'm gonna click on that and look at this I get this really cool thing here where there's three different types of options here I have an ease in and ease out and an ease in out and in chrome you get the same thing but instead of it being it's not as visual as this but you'll get one like this and has a little arrow on the right and a little arrow on the left and you can just click and cycle through all of these options so if I'm adding ease in it's showing me all the different options I have for ease in so on ease in and this little line at the bottom is visualizing it for me it's showing me an animation going back and forth the chrome one is a little bit better I will admit but you can still see the way that speeds up you know you can see the animation going on there I go to quadratic it's really fast the beginning is really slow and then it was really fast then keeps going now this one you'll notice the line actually goes down and then up so it's gonna go backwards so you see here it's jumping back and then going forwards I don't want to get too much into how these the curves are working but it's pretty much if we go to linear it's a straight line so at this is one of the lines is the time passing this one will be the time passing and then I think one of them is time passing and one is the movement of it so here it is just a constant rate whereas if I look at the backwards one it's actually moving backwards a little bit as time passes so time is actually time would be going this way and movement is going this way so it's gonna go backwards a little bit as time passes and then all of a sudden shoot up to the end now that's an ease in if I go to eat out you'll see all the curves go the other way so ease in the curves are this way ease out the curves are the other way because on these ones it's starting fast and then going slow it's slowing down here at the end and then the easing out give you these s curves or it's going fast slow sorry where it's going slow fast slow so pretty much the more horizontal the line is the slower it is and the more vertical the line is the faster it is so on any of these as I'm clicking on them you'll see here it's giving me something called a cubic Bezier and I can just take this cubic Bezier copy it and I can actually just paste that right into my code right here boom and now it's gonna get that curve for its animation now another thing that's really cool with this is incrementing Firefox are both the same you can take these and click on the little handles and bring in your own animation whatever you want to do so I do this this is gonna be this crazy thing where it's like shooting off farther you can see it's bouncing back and forth so I can take this whole thing copy that paste it right here and now it should rotate backwards and then go forwards it's me whoa it's a bit of a janky animation just excited too much of it but you get the idea where you can see it sort of bouncing one way and then the other so you can come in try and develop your own animation and use you know use your own timing function in here really nice and handy to come up with something exactly what you want for your animation or for your timing function I should say and this one probably a little gentler it's still kind of janky well not janky but that's not too bad actually I sort of like that one so we're gonna stick with that for now now the last one we get to is the delay so transition delay and transition delay is how long does it take for the transition to actually happen so I'm going to put in let's put in like two seconds which is really long I'm gonna put it on top and we wait two full seconds and then the animation happens so how long until this transition starts happening now in general to the transition delay you're not gonna use it like that so much just because two seconds like that's kind of ridiculous right like no one's gonna be waiting around two seconds for something like that to happen because that doesn't make too much sense now one thing you can do though is instead of writing out this way there is the transition property which is sort of like margin so you know margin we have margin which is the same as writing margin right etc etc etc so the transition property is the same the transition property takes all of these and one thing that's important is the order you do put them in because well sort of so let's just say here I'm gonna comment all this out we'll do background and we're gonna do 500 milliseconds and we're gonna say ease in so it's going to turn but you can see my background is still animating that's just you know we'll make it really long just so we can see it's rotating but I have I made it so long now actually 505 thousands way too long we'll do 1000 there we go so we can actually see the whole thing happen and it still takes a really long time to do right so this is why in general a thousand like holy-moly a second is a lot longer than you then you realize it is so here we can see the animation is happening though but it's only doing the background so if I wanted to do this I could comma separate oh and I said the order is important here if I took this and I put it at the beginning that will make it shorter 250 milliseconds the the thing it's important is where the delay comes in because here say I do one second you can see that there we go so it's actually it is working it's just if you do two numbers the second one is the delay so even here if I write like one second space to 50 you can see that it's actually it's one second is now my duration and there's a really short delay of 250 milliseconds on it whereas if I make this a lot longer you can see that now we're waiting we're waiting we're waiting we're waiting waiting oh look it just transitioned that took a lot longer than I expected you but you get the idea we're waiting we're waiting we're waiting there we go and then when I come off so it's doing this one as how long the transmission takes and then this one the second number is always going to be the delay now if you want to do multiple ones so I want a one-second background ease-in and then I'll do kama 500ms transform ease out and then I can put a delay on this of say one second nope it didn't work there there we go so there's a delay on that so first it's doing the there's no delay on this so there's no delay on my background so my background is not delayed and then once this is done because this is taking a full second to do so I'm transitioning my background once my background is finished transitioning because I'm putting a delay of one second on this then that's happening so it's transitioning color then rotating and then switching back and going back with the other way now one word on a performance so I said I was going to talk about this if you can limit your animations to transforms and opacity so I'm currently transforming or I'm currently transitioning my background but in general you'd want to avoid that now I transition backgrounds four button hovers and stuff like that all the time but four transforms and opacity the browser uses our graphics card for these animations so it helps them run smoothly for others if there's no GPU acceleration and quickly run into janky animation especially if you're using the transition all it's fun to animate things like box shadows and borders and a whole bunch of stuff all at the same time but be aware that the browser's repainting things when it's doing this and it has a hit on performance so I hope this has been a nice little introduction to just how we can handle our transitions and some other things you might be able to do with it I hope you like this video if you did please hit the like button if haven't yet subscribed please consider subscribing and of course until next time don't forget to make your corn in the internet just a little bit more awesome and that's it for looking at the transition properties I hope you liked this video and of course if you did please hit the thumbs up if you have any comments any questions don't be shy to leave them down below if you haven't yet subscribed please consider subscribing there's new videos like this every single week and please don't forget until next time to make your economy Internet just a little bit more awesome

Channel: Kevin Powell

Views: 340,644

Rating: 4.9684472 out of 5

Keywords: Kevin Powell, tutorial, html, css, css transition, css transitions, transitions, css animation with transitions, css animation, transition basics, css transition tutorial, css transition properties, css transitions properties, how to animate on the web, how to transition, how to transition web, how to transition css, transition

Id: Nloq6uzF8RQ

Length: 17min 59sec (1079 seconds)

Published: Wed Jan 17 2018