Build Your Own Business Website header image

How to Create a CSS-Tricks Style Navigation Menu Part 6 – Add the CSS Transition Animation

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to add the CSS transition animation and discuss the way to use the transition properties. We define the property that we are positioning, provide the time involved in creating the transition, define the kind of transition effect and the amount of time before the transition starts. We also discuss the transition properties and the transition timing function values.

Video Transcript

Alright, a couple of weeks ago, we started this where we created this thing. And the one part that was missing from this was the part you can see active right now which is where it doesn’t just jump automatically to the color. It kind of eases into the color and that’s called a CSS 3 animation. And while all of the rest of this was done using the Thesis Nav Menu plugin, this is going to have to be this easing or this animation is going to have to be done using some custom CSS.

Now obviously, I’ve already put the custom CSS in here because I was playing around with it. But if we go over to W3 Schools and go to their CSS 3 section and then come over here to transitions because that’s what we’re talking about is the transition. Transitions have a couple of different parts when you define them. You define the transition or you use the transition property. You define the property that you are transitioning and then you provide the time involved in creating the transition.

So if we take a look at what we’ve done here and let’s just go over and look at it in Firefox for a second here. My custom CSS, what I’ve done is I’ve transitioned the background color and I’ve defined the time as half a second. Then I’ve defined the kind of easing or the kind of transition effect that I want, which in this case is, ease. And then the amount of the time before the transition starts.

So for example, if I made it 1.5 seconds here. Actually right now it’s taking the moss transition so we’ll just move that to 1 there. See how it took a second and a half to do the transition instead of half a second, right? Okay and I could also say don’t start for half a second. I have to do it on the right spot though. See, so you go over to hover and it takes it half a second before it begins.

And we could you know, really stretch it out, 5.5 seconds. See how long it takes for that transition to happen? And this is on the hover, right? That’s the hover condition that does this. So I’ve got the custom UL, menu, main menu which is that menu up there, LI a hover. And then as I go over this, it gradually becomes more distinct.

Now there are a number of choices here. So we’ve got these 4 different ones. We’ve got the transition for browsers that work in CSS 3. We’ve got the transition for the Firefox browser. We’ve got the transition for the Apple browser and then we’ve got a transition for the Opera browser. Now eventually, all these things are going to go away. You can see the code looks the same. So they’ve all adopted the same code but they have their own little engine that does it. And so currently, you have to show all of these. You have to have a definition for all of these in order for it to work properly. So that’s the first thing to say about this.

The second thing is that there are different effects. So if we come back over here to CSS 3 Schools and we look at the effects, let’s see, what are different effects? Okay, that’s the transition timing function is what it is. I called it an effect but it’s really not an effect. It’s the transition timing function and it has these various values, linear, ease, ease in, ease out, ease in out. And so ease specifies it’s got a slow start and then fast and then it ends slowly. This specifies an effect with a slow start but then does it normally. This is a transition effect with a slow end and so we could easily you know, change the ease here from ease to ease in. And let’s make it 5 seconds so you can see how that works. Yeah, 5 is probably too slow. Let’s take it to 3 seconds. So that’s different somewhat than the straight ease. Straight ease starts a little faster than ease in.

So you have a bunch of different choices here but essentially, you’ve got 4 properties that you have to specify. You have to specify which property it is that you want to change and you have to specify the amount of time it’s going to take in seconds to change. You want to specify the timing pattern and then you want to specify the delay before you start. Those are the 4 parts.

0 Comments… add one
0 comments… add one

Leave a Comment