7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Animating Multiple Properties

Hello, and welcome back to Practical Web Animation. Sometimes a good design doesn't necessarily require more skill or more advanced techniques, sometimes it just involves thinking outside the box a little bit. And with this particular project, we're going to be performing some really, really simple animations, nothing that's any more complex than what we've already done. But we're gonna animate some CSS properties that might not seem quite as obvious in order to get us a different type of hover effect. So again, what we're doing here is not gonna be difficult at all but again it will involve some less obvious types of animations. So I'm going to collapse our JavaScript window here. The starting pen for this lesson will be found in your course notes and once you open up that starting pen go ahead and click on the Fork button to create your own copy of it and then we'll get started. So as you can see we have a navigation unit set up just like we've done before. We have an unordered list with the class of main nav and then a few list items inside that, and in our CSS I've set all the box sizing for all items two border box, set our bodies background color to #943, our text color to white, and our anchor tag are link text color to white as well. And then again just like before with our main nav class we've set the list style to none to get rid of the bullet points and padding left to 0 to get rid of the default left padding on a list. Then we'll go down to the list items themselves. We're floating them to the left. We've aligned the text for each of those buttons to the center of those list items and we've specified font family, font size, etc. For the anchor tags we've set the width of each of those to 100 pixels. Since we're not really dealing with a background color here, I'm not worried about the height. So again, we're just setting the width here and putting a little bit of margin in between each of those buttons. So now I wanna create a hover effect that's going to do a few things. First of all, it's going to change the color of the text and again we're going to animate that color we're not gonna switch to the new color. We're gonna animate the color of the size of the text, we're gonna make it shrink down a little bit as we hover over it. And then we're going to animate a border on the bottom of each of these buttons. So we're gonna have kind of an underline that animates up and fades in, and again, this is a really simple animation, easy to do. It's just animating some properties that we might not always think to animate. So first of all let's create the hover state here I'm gonna skip a couple of lines down here at the bottom. And we want to point to the main nav class inside that we're pointing to list items and anchor tags, and we want the hover effect now, so colon hover, and when we hover over this first of all I'm going to decrease the font size a little bit. Right now the font size is 16, I'm just going to reduce that to 15 pixels whenever we hover over it. So, as we hover over you can see that gets a little bit smaller not a huge change, nice and subtle, but it works. Then I wanna change the color of the text as well. I'm gonna bring it up to a kind of a light shade of red, that kind of matches the background here. It's just much lighter. There we go. Already looks pretty nice and we can just animate it as is and it would look pretty decent. But what I wanna do now is also I wanna create a bottom border that just shows up whenever we hover over our item here. So we could come down here. In fact, let's create the bottom border for the A rule itself so we'll create a rule here called border-bottom and I'm gonna set it to 1px solid, and then I'm going to give it a color of #b65, and now we can see this lighter shade of border underneath our text. So what I wanna do as we hover over it, I don't want to see that border by default. I want it to animate in and I also want it to animate up. So I want it to be down lower initially, but I want it to animate up as it fades in. So this #b65 color that we've entered, that's actually gonna be our hover state initially I don't wanna see that border at all, so in our hover state here I'm gonna set the border color to be 65. And then in our original border bottom definition we're gonna change that to the same color as the background of our site which is this #943 shade. So now when we hover over it we can see that bottom border appearing. So let's go ahead and create an animation out of this for our original A rule. So there's our anchor tag here. We're gonna create a transition property here and we're going to animate all properties over the course of half a second so 0.5s. So now we can hover over that and we can see our border fading in as our text shrinks in size and changes color. So now I wanna do one last thing and this is one of the less obvious properties that we might animate and that's the padding-bottom property. So basically, I want this to not only fade in, I want it to move up from beneath so we're gonna start off with more bottom padding in this anchor tag. So in that initial A rule I'm gonna set the padding-bottom property to a value of about 8px and since we're transitioning all properties here, when we change that padding-bottom in our hover effect, it will animate from this value to whatever value we enter in. So down here I wanna set padding-bottom to 0. So it will animate from a value of 8 down to a value of 0. Let's see how that looks. So we hover over it and now we see that bottom border is not only fading in but it's also moving up and we did that by simply animating the padding property of our CSS. So I really want you to jump in and experiment with all the different CSS properties that you can animate because you can create some really nice, less obvious effects using these properties that you might not initially think to animate. So again, experimentation can often lead to some really nice results. So again, I want to encourage you to experiment with those and come up with some really nice hover effects of your own. Thank you for watching, and I'll see you in the next lesson.

Back to the top