10 CSS animation tips and tricks

the other day I was trying to solve a challenge that my friend Emmett Sheen had sent me and along the way I learned a couple of new tricks or things I guess you could do with animations and transitions that I never knew about and it got me thinking a little bit that there's actually a whole bunch of neat little things that can help us save time or simplify things or just fun tricks that we can do with animations and transitions that a lot of people aren't actually aware of and I figured it'd be a good idea to make a video about those and so here we are and we might as well just dive right into it and jump into vs code right here and we're going to be starting off with this button but then we'll bring some other things in along the way as well to explore the different stuff we can do so one thing that's super common is to have something where we sort of scale things up or have some sort of transform at least on the button so here I'm I'm just transitioning it or translating it I should say upwards a little bit uh when we hover on top it's a lot more than I would actually do so I'm just exaggerating it a bit for this video and then what we often do is put a transition here where we do say like 500 milliseconds and on that transition we'll do our trans form we have transition transform translate my mind is getting right with that uh we'll just say 500 milliseconds and we get something like that where it just looks a little bit better right where it eases in and out but we can actually make this a bit better and let's exaggerate things here a little bit so let's say when we hover on top it's going to go and you know what I said we're going to exaggerate this let's really exaggerate it so when we go on top it really moves up and then it moves back down there and this is completely fine but we can add a little bit of more interest to our animations by actually having different ones depending on the state so I'm going to copy this right here and we're going to put a different transition when we're hovering and now let's just say this is 250 milliseconds so when I first hover on top it goes really fast button's excited we're going to click it and then when we let go oh right uh so we sort of get the little the little let down and I think it adds a little bit more excitement that way so this is when we're hovering on top and then the regular one when we're not and this is something that I actually do quite a bit I think it's a nice fun way to have a different speed a different timing function uh different things going on sometimes we're only transitioning something in One Direction but not the other uh and it can be a nice very useful thing to use on your projects now next I want to look at some animation stuff rather than Transitions and I've just set things up to add a class of party time when we click on our button and over here I have an animation with some keyframes going on so let's say that class of Party Time party time we can do our animation of uh party and we'll do and we'll say 2 000 milliseconds so it's not too fast and we'll say infinite knit like that so now if we come and click on it we start getting our party time going on and if I click it again it will stop so that's perfect and it looks you know pretty good uh it looks terrible but anyway um but the first thing I want to look at here is actually how we can change the order of these and it won't really matter and you know what let's just simplify things a little bit by only having um or look very red orange red but let's take this red here and put it um above so we're doing we have red red orange but we have a zero percent here forty percent then twenty percent so if I save this and we click it's still going red orange red and then we'll you know you know that that orange is still coming in here so or even you know let's just make this green so we can see that it's actually going to go right we get the green then we get the uh the green first and then it's followed up or sorry we get the orange first and then after that the green and maybe we'll make this a little bit slower just to make it a little bit more obvious um so we get the orange first then we get the green even though the green is declared first because it's not the order that's important it is the percent along in the animation that is important let's click on that to stop it for now so it doesn't bother us too much and let's come in here and actually delete a whole bunch of these and something that's interesting is let's put this at 50 or maybe we'll do it at 25 it will go to Yellow but let's say I wanted another red to come in I could actually come here and say it 50 it's going to be red and then here I could say at 75 percent it's going to be yellow and then at 100 we can come in with one more and say that the background color on the last one here let's just choose this because it's showing it's a little bit too close to Red actually let's make it 200 so it's more in the Blues and now we can click on that and it's going to cycle through and it's going to do all of them before going to the blue at the end there so it's doing zero then the 25 then the 50 then the 75 here so we're combining different keyframes with one declaration and this can be useful just to if you have a very simple animation that just has a few things in it instead of having to have a whole bunch of keyframes you might be switching between two of them like we're doing here or whatever it is you can combine them no problem at all and another thing you could actually do here is let's get rid of all of these and at 100 let's just or we could just keep it like that and that's not going to be obvious enough um so let's make this one 300 so we're back into like the purples and we'll notice that the color is going and then it's we're on infinite so it gets to the end and then it starts over we're not alternating through but you'll notice the 100 point and I have nothing else declared and it's using the zero percent as just the regular default that we are using here which was a variable I have set up that is clearly blue so you don't actually have to declare any starting point and maybe you have a whole bunch of different things they all get pushed in one thing so it could be a transition for you know a translating or something or whatever it is you don't have to worry about the starting point you can just worry about the ending point or I could do this as a 50 and then it would actually go and then come back so we get the purple and then halfway through the animation and then it goes back to the default color after that so just having a 50 like that sometimes can actually be really useful now for this next one we're actually going to jump over to code pen because this is the challenge and this is one of those things I found out doing the challenge uh that I never would have expected to be honest and it was to create this effect right here where it slowly speeds up and just keeps on spinning and then it slows down when we come off and it's not using any JavaScript to be able to do that and the way this is basically working is I have this animation that's going so we have it right here and we run that animation when we hover so when I hover on top it's going to start doing the spinning and it's doing a transform to rotate it 360 degrees but we want it normally that would just sort of go at full speed from the very beginning which we didn't want and this is where I found out you can actually do a rotate so we have like rotate transform and scale are their own properties Now do check with browser support if you do plan on using them but uh basically what I'm doing is on Hover I'm reverse rotating it and we have a transition on that so it's going from negative 720 to zero so it's negative rotating well the other thing is going but that negative rotation is actually slowing down as that's going on and then at one point it's not running anymore and then we get the thing at full speed and then we need to come off of the hover it sort of the the opposite effect is happening I don't know why you'd necessarily want to do this in the real world but the transform rotate and the actual rotate can be used as two separate properties counteracting each other in certain ways this is the use case I found for it if you'd like more watch the video where it's a little bit more clear on exactly how that's happening because at first I did it with a parent but anyway just something that I thought was really interesting so I wanted to share it as part of this video alright so for this next part I've added a whole bunch of dots all along here and those you can see them right there the red have some basic styling coming on them so we can see them and I've also added this dot dance with a very very simple animation on here that's just making them rise over two seconds using this and we want them to actually be dancing rather than rising and I have updated the JavaScript that just toggles that so when we click the button or the dots rise and fall back down because we are running it as an alternate so there we go that we have them bouncing up and down basically and one way you can make it a little bit more interesting is using animation delays and because we have 15 dots the easiest way to have a different animation delay on each one of them is to use sass here so I am using a SAS for Loop that's just going through each one if you're not familiar with SAS basically we're saying for I so the variable I here from 1 through 15. so the first time it does it this will be nth child one like we have right there 100 milliseconds times the number one so 100 then it's going to do it again for the second one so this becomes nth child two 100 times 2 so we get a delay of two then a delay of three then a delay of four then a delay of five all the way up but we can write a lot less code to being can happen so now if I click you'll see that it starts and they all start going up and down and it looks kind of nice actually I think starting off like that and let's just click to turn it off and we'll do that again but you'll notice when we do that it starts at the first one and it runs all the way through and then they all have that because we are delaying the animation what's interesting with animation delays is if you have it as a negative number it's not actually it's going to just start where it would have started right they the delay we're not delaying 100 milliseconds before the next one starts it's a saying like if there was a delay but we were starting in the middle of the animation where would we be so it's in this case probably nicer actually without the animation delay on there but with sometimes if depending on the situation that you're in sometimes you need them all just to be starting at the right spot rather than uh you know having that slow delay that would happen every time you start something really depends on the use case it's not as often you will need the negative on there but every now and and then you'll be very happy you know about it and this next one is less so of an animation tip well that's very important for animations and motion in general that I should say but what we generally or what we often want to do is be aware that people don't always like motion and they have preferences in their browser they can turn the motion off and then they get to this website that might be attacking their senses and it can go really far into the point of causing nausea or headaches and they're going to leave your website if they're not enjoying the experience but luckily it's really easy to accommodate all we have to do is we can come here and we could say app media and we use a prefers reduced motion no reference and I'll make that a little bit bigger so we can see it all and just wrap it like any old media query uh right so we just have something like that and now for me where I have no preference that my animation is still running but if I come and I inspect on that and in your inspector you can do earning Chrome anyway you can do a control shift p Mac would be a command shift p and I can do an emulate and prefers reduced motion reduce which is the system setting and look the animation's not running um for some things you might want to keep the animation if it's little things it's not turn off animation it's not no animation or no motion it prefers reduced motion so you could use this to reduce the motion that's on things but keep little things around there like if you have a toggle button that slides across that's not bothering anyone it's more for things where you have vestibular orders or other stuff or motion that's moving in the wrong direction so as you're scrolling and then you have things that are going in a different way you could always disable that just by wrapping everything inside your no preference right there and this could even be for your smooth scrolling as well when you click and it smooth Scrolls down some people it really throws them off my wife hates Pages scrolling so um yeah for for those types of things is really easy to do and we just want to be aware that well you might really like that motion you've created and it looks amazing there are a lot of people out there who not only don't like it but it actually can have physical effects on them so we want to be careful about that and if you'd like to know more about this because I'm just sort of brushing over it really quickly right now but I'll link to another video in the description uh where I did a bit more of a deep dive on this and now before we jump into the next one I just want to say that this is far from an exhaustive list so if there's any tips or tricks or anything like that that I've missed along the way leave a comment down below and let let me know and let everyone else know because there's animations there's so much cool stuff we can do with them okay let's jump into the next tip now now for the next thing that's interesting is not only can we do multiple ones like this but I actually learned something along the way in that challenge that I talked about with Amit before that didn't work for the thing but it made me learn something new let's go back up to my button and on this one what we're going to do is on the party here we're going to add something that's maybe a bit weird but let's do a rotate of uh 180 degrees and so now when I click it it's going to spin around and spin back around now this has also gone a little bit crazy in the background because the party is being used on those other guys and I wasn't expecting that I think it looks kind of fun but it's a little bit distracting so let's take that off um and you know what we're just gonna take this whole thing off We're Not Gonna worry about the buttons we're just going to worry about that guy that's rotating 180 degrees back and forth and what we're going to do is let's say it's going to take a thousand milliseconds to do it so I click and it's going to go there and come back and it only does it once and then I can actually do we can have multiple animations we can actually do a comma and do party again and this time we're going to do it over 2 000 milliseconds these are both going to run at the same time so it's a bit weird so let's come here and do a 1500 millisecond delay as well so I can click it's going to do the first one and then the second one and then you could do a third one if you wanted to it's just a comma and then we do party let's do 5 000 milliseconds and we'll have to have a one thousand two thousand we'll say a four thousand millisecond delay on this we're getting really exaggerated and let's do this one as infinite infinite knit alternate you need just because why not I don't know if I spelled that right we'll find out in a second so I click first one second one and third one much slower and that one should keep running as long as I spelled everything correctly which it looks like I did so just to say uh in this situation again silly demo probably not the best use case for it but it is interesting that you can actually you know you could have the animation run once in one way and then run again in a different way or to continue running once it's slowed down or whatever it is you could come up with some interesting stuff here all right and now the last tip is a an interesting one it's something that I've talked a little bit about and people have been asking me to talk more about uh which is or let's come we're gonna look at our button here let's turn off that translate um and let's change this background a little bit that's on here I'm going to set this as a linear gradient linear gradient uh gradient from we'll do red to blue to match my background and hit save let's do 45 degrees here or 90 degrees I guess we'll just go left or right 90. degrees there we go have that set up um and yeah so we have that and people often want to animate the gradient that's on there there's tricks of doing it where you're sort of moving your gradient around but one thing we can't do is animate this red color here and so just to show you if we come here and we change this and let's make this blue and we'll make this one go to Red on that side and this will be my background and background is not an animatable or background image I should say is not an animatable property so when we have that you can see it doesn't animate and if you're saying it's because it's not the same property you can fix that right there it still doesn't animate or transition because it's not an animatable property because it's looking for an image basically and we can't really change the value of red and so the first solution that people got very excited about let's just come here and say this is uh color one will be red and then color two will be blue and then give me one second and I'll get all of these set up and there we go we have it set up and you can see that it's still working I still have it and then what we could come down here instead of updating this you know you'd think it would make sense that we could update these two values right there instead but we still get the same thing and that's because custom properties are something that could literally be anything the browser doesn't have enough information to know if it's actually able to do anything with them uh there's a lot of technical reasons why we can't animate a custom property in the way I'm trying to do right here and this is happening because once again we're trying to you know transition the background image and luckily recently or Chrome's had this for a while and very recently it just got added to Safari so we're just waiting on Firefox but uh we have at property and app property allows us to declare or to register custom properties so I'm going to have app property and we're going to say color one and we have to give it three different things we want to give it a syntax inherence and an initial value so the initial value we know we want this to be red at the beginning the inherits could be true or false it's up to you I'm just going to say it's true because why not and the syntax here is going to be a color and you can see vs codes syntax or they're they're highlighting here is not too happy with me but that's fine I'm going to take these as far as the syntax it can be a lot of different things but since we're using colors and it doesn't have to be a keyword it could be any color hsl RGB whatever so color two will be blue and everything broke for me because I forgot to put this inside of quotation marks there we go and look the syntax highlighting is better too I think um though it could be a little bit prettier there we go gotta hit the right Keys ah now it's working um and now the advantage of doing this and the advantage of registering a custom property is if and just really fast like you just look up the different things you knew colors numbers um different values strings there's a whole bunch of stuff so now instead of transitioning a background image which can't be transitioned we could transition my color one and we can just do a comma here and do my color two over one thousand milliseconds so now if we hover on top oh we can see it's not going that way but it is going the other way that's because this transition is getting in the way so let's hit save and now you can see that it's transitioning the colors it's not transitioning the image it's transitioning the custom properties themselves and this is kind of cool because you can actually do like different types of things right so it completely changes the style maybe this one even gets like a 1000 millisecond delay on it so it's all the whole thing goes blue and then the red comes in do so much fun stuff with this I'm so excited for at property it's part of Houdini uh there's lots of really other awesome stuff coming with it as well but the control will get over our custom properties with this is going to be amazing and as I said it's already supported in Chrome it's very recently landed in Safari and it's really really cool what we can do with it and as a reminder if you want that video where I talk more about prefers reduce motion as well as two other very simple changes you can make to your CSS they can make very big improvements on it that video is right here for your viewing pleasure and with that I would like to thank Michael Simon Tim and Johnny who are my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome [Music]

Channel: Kevin Powell

Views: 151,480

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css animation, css animations, css transitions, css transition, web animation tutorial, css animation tips and tricks, css tutorial

Id: y8-F5-2EIcg

Length: 20min 13sec (1213 seconds)

Published: Thu Apr 06 2023