Animating with CSS Transitions - Using transitions in action

in the last video we explored the CSS transition properties in this video we're gonna see how we can put them to work to make some really cool little animations hi there and welcome my name is Kevin here on my channel we learned how to make the web and how to make it look good while we're at it if you missed the last video I suggest you go and check it out where we look just at the transition properties themselves and how all of them work and in this video we're gonna be looking at a more realistic examples and yeah I think it's me a really fun video so let's go jump right into it so in this video we're looking at how to use CSS transitions in a real world type of environment to do some interesting things we're gonna be starting with this here where as you can see there's no animation there if I click on more information the information just appears I have a heart that gets smaller and bigger the color just turns on and off and then I have a less information button here and that just does that and especially for this more information less information thing it's really jarring it's not good for user experience because all of a sudden things start happening and then going away so we can improve the user experience by adding animation to there and even with this just the heart growing and then the color changing it just makes it a little bit smoother and and nicer and so what we're gonna be doing is making it like this where on hover there's this nice little transition effect I can move that up the more information disappears less information animates in if I click that the more information comes in and you can see those only happen after the fact so though both of those animations have a delay on them to help again with the overall user experience so let's take a jump in and see how we did all that okay so the first thing I want to say for this video is just we are starting with a lot of markup done there is some JavaScript done in this and obviously a whole ton of CSS just to style it the focus of this is really just using transitions on a site like this if you want to see it the code pen is shared down in the description below so you can go and see how I've done it but I don't actually have a video showing how I coded this card up I really just want to focus on the animation and stuff like that and when I'm looking at certain things if it's important for the transition I will look at how a little bit more in depth on how the code was written for that specific thing so the first thing I'm gonna do is right now on hover I have its it's sort of re you know we're keeping our card but the whole thing is shrinking down in size and this is just to sort of show that it is an interactive card in some way so when the user gets the mouse on top something like that happens so here if I go and I find my card I just to show you the mark up a little bit he actually will help I have a difficult card so this would work even if you have multiple cards inside of here I have my single card so what I'm doing is and then here I have my card header so what we see on the screen right now is my card header and when I click here the card header shrinking away and it's showing us some body text here so what what I'm doing is we're when I hover on top of here the card header is changing a little bit so if we go and take a look we have my card header here that has a whole bunch of styles on it and I'm using absolute positioning just to make life a little easier to create some of these and on hover I'm just switching the top bottom right and left all from 0 to 25 so that's giving me this little effect right there so it's pushing them in by 25 pixels on all the sides now if you watch the last video you'll know this isn't the best practice in general we don't want to be transitioning these we want to try and only transition transforms and opacity and most of the transitions I'm doing this are using those even though there's another one that isn't there's ways around this there's other things that you could do to get a similar effect but you know where we can't always as much as we want to follow best practice at times you might need to try some other things and if you do want more information down in the description below there's a link talking a lot of detail about why you want to stick with transforms and opacity that one thing that's important is not to put the transition here even though this is where things are changing because if I came and I put transition here transition let's just do 500 milliseconds when I do that you'll see it's going to transition when I hover on top but not when my mouse leaves oh there's the transition and then not there because right now this transition is only coming in for the hover so when I hover there's a transition but when I'm not hovering there's no transition so just make sure you put your transition over here now I can right just transition like that and we can see it's working and it's working in both directions now this isn't really great though and this is gonna have the default timing function this is going to have the default of also it's trying to animate everything or transition everything and we want to avoid doing that because already I'm transitioning some things I shouldn't be by having this on all it's giving the CPU even more work to do so we want to specify that we want to only animate these four things on out of all of this so here where I have transition what I can do is I can say top let's make it a bit shorter 300 milliseconds and I'm gonna do an ease okay I like ease out so now if I come here and I hover over but the top one there is doing a nice little slide in and out now I want to do all four of them so I can do that by comma separating them if you have a lot of things to do like I hear here I have 4 it would make a really long line of CSS but I can just push return and write the next one so left 300 milliseconds ease out comma and then let's just copy and paste this because it makes life easier bottom right and now we have all four of them going again so it's working on all four once again but this time it's only trying to do those and you could technically give them different types of timing functions or you could give them different times even but it would look a little strange I think in this case great so let's keep going now here when I click more information now you can see that the bottom is already animating because I've told it that we can transition the bottom so we're transitioning the bottom and when I'm clicking on that what it's doing it's actually pretty far down um here my bottom is just switching to 50% so my bottom is sliding up to the 50% mark and then sliding back down so I don't need to add anything else in there it's just working on its own so that's good and dandy and I'm going to do that it reveals the information so the thing I like about this is you're revealing the information so you're showing where the information was it's not an instant change it's just coming up and sliding up and showing that there are things there and it also then lets you know what's gonna happen if you do less information you can sort of guess that it's going to return to the previous state now this more information button when I click on it just disappears when I click on less information it just disappears so that's not terrible it doesn't bother me too much but we can make that a little bit nicer with some transitions on that as well so if I go all the way back up here here I have my more info and less info so this is my more info and that is my less info and the way I'm doing this is my more info was just where it happens to be and my less info I did a margin-left:auto on it so that's just why it's all the way on the right side and I've translated it off so if I take this transform off actually I let's just put this to zero so we can see it where it is so there's my less information right there now say I did 50% on this it's pushing it 50% that way a hundred percent and it pushes it further off but it's not quite all the way we can probably it away with like 120 percent even just to get it I would have view and there it goes we can't see it anymore on my header I also have an overflow of hidden so it's that's why we can't see it it's not sticking out the side there so what I want is I want those to animate actually I want let's go up I have both cards here where most of the styling our cards most of the the info buttons here is where most of the styling is so what I'm going to use this for is let's give them both the same transition just so it's consistent so transition of transform how long I don't know we'll try 500 milliseconds and once again in ease out um so that's gonna do the one thing of it it's gonna change when I click you can see that the less information when I click here you can see it slide in when I click that it slides out and here it's gonna slide down and then slide back up this one's less obvious just because it's moving in the opposite direction of the original animation so it just sort of sort of disappears but you can't see it sliding in and out what I like about this is again it shows sort of catches the users attention just to alert them that this button is gone but more importantly this is creating a little bit of animation just to make the user more aware that there is a way to close this down now because it's not in the same spot as before there's no big X that's appearing so I just want to make it obvious that that's there the other thing we do want is the the background color to change so here I'm transforming this YZ out I'll do a comma and we'll say background this gonna be pretty fast we'll say 250 milliseconds so now when I hover on top there we go we can see it's sort of just a smoother little and even maybe you could just make this 200 I don't want it to be super obvious I want it to go pretty fast but just to smooth things up a little bit and there we go we can see that coming in cool good I think that looks pretty good so then the same thing should happen here now one thing I'd like to do is when I click on this the buttons are coming in and out at the same time I don't really want this to slide in as it's moving up I want it to only slide in once the animation or the transition is finished and the same thing here once this is finished dropping down I want that to come in so that's why here here I have two different spots I have my more info and less info just because I want to do something different with these two so my more info this button down here I actually want to put a transition delay on that transition delay of let's say 500 milliseconds and we'll see what happens um except what you'll notice now that transition delay is doing something I don't want to happen when I go on top it's taking half a second for the background color to change which is obviously not a good thing so here I'm going to come a separate that comma or my backgrounds the second one so comma zero milliseconds and now that should have no delay when I hover but when I click see how there was a delay there so it's going up and then it's sliding off and then when I click this actually I don't really want that to lay there though okay I don't want I want more info to go away at the beginning so what I should probably do here this one should probably actually be let's remove you from here and put you on this one so now if I click that it disappears and then once the animation is done the less information slides in that makes a lot more sense so we can see it goes like that and then this slides in but that creates a problem because now when I click on less information it just sits there and then disappears which is really weird luckily we can get around that so this transition delay actually I'm gonna take away from here I only want that transition delay to happen when my card is open so when my card is open I want there to be a delay but when I click this it's removing the class of open from my card here from the card header so we can actually it's just I'll show you what's actually going on so here I have my card header and when I click show information we're getting card open and when I click less information you can see it's just going back to the regular card so card open and then the regular card so what I want is I want the delay to be on it when the card is open but I don't want the delay they were the rest of the time so let's go find my card open a card open more info less info so on here I can put my transition delay so that means when I click this and it adds the class there's a delay but when I click this it's just gonna go away right away so when I click that and then it comes in and then the other way around good okay so I'm happy with how that looks more information that's okay less information actually you know hmm I could put a little delay on that so I want before I took the delay off but I think we were better off with it so let's put that transition delay back on but this is the opposite case scenario I want this to delay when it goes up but I know I don't want delay when it goes up I want to delay when it comes down see how that looked nice I think if I do that and now it comes up after so when my card is closed I want to have a delay when I don't have my open on there I want to delay but when I have my open I want no delay so I can just do transition delay of zero over here so whoops I'm just gonna put em s just to make sure so there's no delay it just dies this slides in I click that once the card is fullscreen the little more information box comes in again and I really like showing this example because it shows that you can use delays in interesting ways to help make your site a little bit more cool and have some fun effects in it without actually needing to get into the real CSS animation properties just using transitions you can still use delays in interesting ways and in practical ways that are fun and cool to use so that looks pretty good and the last thing I want to look at is on this to play around my heart a little bit because I don't really like how the heart is working I'm gonna make that heart a bit bigger and just let me get easier for us to see right now so I did use a size CSS variable here so if I change that everything should get bigger and there we go let's make it even bigger now actually just for demo purposes so this is you know you could come in here and heart the post if you wanted to and it will stay woops hearted the whole time so to do that and actually I should move it you can see the bottom sticks out a little there I should move it up margin bottom let's move it up a tiny bit there we go um so I like this effect I like this little thing but we can obviously make that a little better um so here on my heart icon let's go find it heart icon you can see that the background is pink and then when the heart gets checked the heart icon becomes red so and if you'd like to know how I built this there's a video up on my patreon now for patrons who where I showed them actually how I built this heart out so you could always go and check that out there's a link to it in the description below so what we can do is for this I want to do a few things the growing of it I want to make that a little bit more fun and obviously I want the color to transition so let's take a look at my heart icon because I think is that where the scale no my heart icon is where the background colors happening and the scale is happening here let's just make that a little bit bigger well do like a 1.2 I just want to get a lot bigger for now for just for demo purposes again I think that's too much normally but that's okay so we'll start with the background color because that's the easier one and background color so it's on my heart icon so right here I'm just gonna have heart icon I was in the right spot whoops the checked background is red so right here I just want to do a transition background and we'll say like 2 150 milliseconds I want this to be really fast I just want it to be enough that there's a there is an animation going on a really subtle one but I want just something there so it's not as harsh as the the instant changeover so that's that's it just something really quick and again one of the biggest problems I see is people doing something like 500 or longer on stuff like this and it just makes this really smooth animation it doesn't really feel like you're checking it it's like oh it's this long long thing so just by speeding that up a little bit 100 125 150 it takes the harshness of the check color change out but it makes it still seem like it's almost instantaneous which is good so that's cool and then I just want to make this a little better so I think we can do that by my heart itself where my scale is so on my heart blood a transition for transform I'm gonna do this at like 300 milliseconds I want to be pretty fast you can see it's growing and then it turns on and off but I think the growing thing we can make it a little bit more fun right let's do an inspect on there let's go and find my transition that's my check box my heart oh well it's just right in easier then I don't want that this will let me the fun fun of dev tools and stuff here you can see that it's rotated there's my ease so I just want to take this ease and let's give it a bit more of a something I want to get a little bit bigger and then shrink back down so you can see it's bigger and then normal bigger and normal not too much I want to be pretty subtle so once I've done that down here I've made cubic Bezier I can just copy that cubic Bezier and replace the ease and let's close this out so we don't have that rotation thing on there you can see it little subtle subtle subtle it's very subtle maybe I should have made that a little bigger just for 1.5 on this may be a point 5 there we go it's just this really subtle like it gets bigger and then shrinks back just a tiny bit a really subtle thing almost like a single heart throb do you know that type of thing to do really really subtle but this nice little bouncing animation and there's the CSS transitions at work so I hope you liked that if you have any questions about what I did don't be shy leave a comment down below if you liked the video hit the thumbs up button I just want to say thank you to my patrons for supporting me and making these videos possible without you guys it just wouldn't be happening if you haven't yet subscribed to this channel please consider subscribing because there's at least one video that comes up every single week like this one we're exploring HTML and CSS and sometimes JavaScript and really fun ways and of course until next time don't forget to make your corn the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 84,268

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: YYlFFMc0RAg

Length: 19min 24sec (1164 seconds)

Published: Wed Jan 24 2018