Tailwind CSS Tutorial #18 - Transitions

Key Takeaways

all right then gang so we're getting there this is looking pretty good now in this video i just want to quickly show you how to add transitions so that when you hover over something it doesn't show you the hovering state immediately but rather transitions to that state over a small amount of time and it sometimes looks quite nice so we're going to do that for these two things up here and also for this down here and i think we might add some more hover effects to this as well so let's start with these two so in our code we need to scroll up to those which are right here okay so these are the anchor tags right here and these are the things we want to add transitions to so when i say a transition i mean from the initial state to the hover state and it's the background color and the text color that is transitioning so when we're creating a transition the first thing we need to do is give the element a class of transition the second thing we need to do is say what kind of easing function we want to use so we could use ease linear meaning it's smooth ease in meaning it's slower to begin with but speeds up ease out which means that it's slower towards the end and ease in out which means it's slower at the start and the end but speeds up in the middle all right so you can play around with these i'm going to go with ease out and i'm also going to set a duration to this and that is going to be 500 so 500 milliseconds so they're the three things we need to do add a transition then the easing function and then how long the transition should take so i want the same transition for this anchor tag as well so let me paste that down here and if we check this out now cross our fingers hopefully this should work yep it does and that looks kind of nice right cool so let's add maybe some more hover effects to this dude down here and then add some transitions to that as well so the next hover effect first of all that i want to add is maybe to increase the scale of this thing and also maybe decrease the background opacity so let me go down here and find this button okay it's this thing right here so because we're going to be changing the scale of it the first thing we need to do is give this a transform class and that means that we can now apply transforms to this element so the transform that we want to apply is a scale effect but only when a user hovers over this element so we need hover to prefix the class and then to change the scale we use scale hyphen and then the scale we want to use so for example one two five so if i save this and come over here we can see that it jumps to this new size when we hover over awesome the next thing i want to do is change the background opacity on hover so i'm going to say hover and then to change the background opacity we use the class bg hyphen opacity and then whatever we want the opacity to be so say for example 50 save that and preview and now we can see the background fades out a little bit more and that means we can kind of see the inner shadow a little bit more as well which i like okay now i want to transition this so let's do the same kind of thing as we did above transition and then we want to ease out as our easing function and this time the duration let's say 300 so a little smaller than the other one so that's milliseconds 300 milliseconds so if we hover all right looks pretty nice and now we have transitions on these elements so there we go my friends that's how easy it is to add transitions to your html elements between their original state and their hover state