Take a look at a task that is a bit tougher than it seems. It requires an understanding of a number of different concepts including the position, transformations and transitions.
- [Instructor] This week we're going to be taking a look at a question that is a little bit tougher than it seems, because it requires an understanding of a number of different concepts, including modifying the position of an element, transformations, and transitions. So let's go straight into the solution for this problem, which I've placed on this CodePen right here. So you can see that we have this navigation, and when we roll over these links, you see this little underline, and the underline is animated.
So that seems like it should be a pretty simple problem. I am using Bootstrap just to make things look a little nice. And if you click on this button, you're going to take a look at sort of a project that I've been working on, that is a more complicated version of this example, with a bunch of other different features in there. So you can see that there's a little bit of an animation that happens here, and some of these items slide into view. There's a lot of stuff going on in here, so you can check out this example, and also the GitHub repo that goes with it.
So let's go back into our solution. So what I have here is a combination of different techniques. The important thing isn't the code for the HTML, I did that in Bootstrap, as I mentioned. So let's go ahead and sort of open this up and go through what we're doing here. Now the number one trick that you need to know in order to achieve this is that we can't really just add an underline or a border underneath these elements, and animate that border.
That's probably the first way you think about solving this problem. Why don't we just have a border underneath, and let's animate that border? But those aren't animatable, so we need to come up with a different way. And the way that we do that is by creating something called a pseudo-element. So you can see right here, we are looking for the link elements, and we're adding an element before the link element. So we're literally able to add HTML before an existing element, and you can't really tell, because this content right now doesn't have anything in it, but let's go ahead and type in something in here, and roll over these elements.
You can see that I'm actually, literally adding some content, and although it looks like this underline is after the text, we're adding it before the text. It doesn't matter much where we're adding it, but just the fact that we're adding something before an element. Now, why is it able to appear on top of our items? That's the next part that we're doing right here, and that is an understanding of the positioning attribute. As you know, when we start up a page, the elements are drawn in order.
So that position is called static. Now we have a few other positioning attributes that we can work with. One of them is position relative. That is what we're using right here on the links themselves. So these links all have a position of relative, which means that we're asking the browser to put these wherever they would normally go. That seems like a silly thing to add, because wouldn't they normally go where they need to go? Yes, that's true, but the reason we're doing that is because there's a trick that you can do when you combine position relative with position absolute.
And the trick is, when you want an element to be positioned relative to another element, the child element, in this case, our element here with this before pseudo-element, we want to set the position of that element to absolute. And then, the parent element should have a position of relative. That means that each individual underline that we're adding in this style rule right here is going to be position relative to the parent link.
So that means that every one of these underlines will be position relative to the position of the parent, which is what we want, because we want these underlines to be related in position to the links. Now, understanding that is pretty critical, and I've covered that before in a previous episode, so make sure you take a look at that video. In addition to that, you can see that we've got some regular sort of definitions of what this thing should look like. And you can see that here's where we sort of defined the color, in this case, we're just making it white, but you could probably just put in some other colors in here, and see how that would change the color of the elements.
And then, the height is actually determining the thickness of the item, because this isn't a border, it's actually just a little box. And so we could actually make that border a lot thicker, and you could see that it would go over, not looking that great, but we could give it a transparency percentage here, and then you could sort of create a box, or a really thick line, on top of our content. That's pretty cool. Let's go ahead and undo that. So we're just sort of defining the width of the item is 100% of the width of the element that it's in, which means that it'll be as wide as whatever we have here.
Let's go ahead and undo that thickness, or make that thickness back to two. And the other properties here is that we have a max width of 100 pixels. That's just because whenever this window gets really thin, you will end up with sort of a shorter version of the navigation, and I don't want the lines to get too long, so that's why I'm setting the maximum width here. Now the other interesting thing here is the position of the items. So by default, by doing this trick, and the way that we have this Bootstrap code sort of set up, the elements that get created get created from the center position of these elements.
So by moving this 50% to the left, it will make the animation happen from the left to the right. If we actually make this left value here zero, then you'll see the animation will happen from the center out. So we can change this left right here to 50%, and now it will move from the left to the right. But, let's go ahead and leave it at minus 50%, like it was before, so that it goes from the right to the left, and that's fantastic.
And then, the last thing that we're doing is the animation itself, which are handled by a combination of a transformation and a transition. So a transformation is how we want this element to change over time. And in this case, all we need to do is just change the scale, or the size of the element, only in one direction. We can actually specify multiple transforms. We could rotate here. We could do a lot of different things.
And then, we want the scaling to happen from zero to one, so in this notation, zero becomes zero, and one becomes 100%. So you could do 0.5 or some other measurement here, if you didn't want it to go to 100%. So now the underline is actually shorter. I'm not sure that is great, but maybe it would work in some instances. And then, the last thing that we're doing here is defining how that transformation happens over time.
And what we're doing here is defining the transition so that it shows the transition in any of the elements. And then we have our timing function here, which allows us to sort of change the speed, so let's make it super slow by making it two seconds long. And as you can see that it's really slow, maybe that would work, or maybe something else, like 0.5. Let's try 0.5. It's a little bit faster. Sometimes these things do take a little bit of time to apply. So, I like 0.3.
I think it works pretty well, so I'll leave it in there. And ease in and out just means that it's going to be not a flat sort of animation, but an animation that is slow at the beginning and slow at the end. That's what ease in and out means. I like to replace the word ease with slow, and in to beginning, and out and end. I think it makes a little bit more sense to me. And then this final element is a delay, if you wanted the animation not to play right away, but maybe have a delay, you could do that.
Now the other trick that I'm doing here is that I'm using a pseudo-selector, this one right here called hover, so that whenever I roll over the element, the animations will modify. So that's what I'm doing here. So this is also a good question to ask, or a good sort of technique to show, that you understand the difference between a pseudo element, like before, and a pseudo class, like hover, and what happens when you combine the two. So here, we're saying, when you roll over this element that we're creating, or really, when we're hovering over the link, right? The element that we are automatically generating changes, and here's how we change it.
We modify the opacity so it fades in, and we modify the position of the element. Then we also scale the element to its full size. So I think this is a sort of fantastic question to ask, because it involves a lot of knowledge about all of these different components of how animations and CSS works. Now here's some pages where you can get more information about animations and transitions, including the definitions on the Mozilla Developer Network for position, as well as some of the courses that we have for you to study up on Motion Design and CSS: Animation.
As usual, if you have any questions that you've been asked, or have asked in interviews, and you want to share them with me, connect with me in LinkedIn, or just about any social media network, like Twitter or GitHub, at Planet of the Web.
Updated
6/26/2018Released
7/18/2017Skill Level Intermediate
Duration
Views
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.
Share this video
Embed this video
Video: Animate an underline on hover in CSS