This is Sasha and welcome to another CSS training video where I share with you how to edit and modify your business website when it comes to the CSS or if you’re learning CSS, thanks for joining me, in either case. Today, what I want to do is take a look at the transition-property and how to make things ease-in and ease-out with a soft effect. Let’s take a quick look.
If you take a look at the page here that I have, you have just a simple image right there, and I define that little width right there in the HTML so that way it’s not too large on the page and we can see transitions happening. Now, these transitions again very helpful for, let’s say easing things in and out on navigation menus. They’re great for pictures as well and just some additional special effects.
In either case, let me show you how this kind of works. Right now, what I have is a basic transition-property with width and what I’ve done is created right there a width of 400, and you can see as I roll over, it goes ahead and just creates that width of 400 which is not a big deal.
--------------------- HTML CODE --------------------------------------- CSS CODE ------------------ img { cursor: pointer; transition-property: width; } img:hover { cursor: pointer; width:400px; }
You could also include a height element in here if you like and then type in height over here and do something like 700 pixels. As you roll over, it’s just like a primary image roll over even without this transition-property. You can see it would still do the same thing. If I hit refresh, you can see it still does the same job.
At the moment, this really doesn’t do much for me. What is it that really starts making this happen or possible? Here’s the way that this kind of works and let me just show you what’s pretty cool about this. If you go to transition and you start seeing the variations that you could do, you could do transitions-duration.
--------------------- HTML CODE ------------------
What we can do is type in 2 seconds, you can also do things in milliseconds. If I do 900 ms which is almost 1 second, but in either case, I’ll do 2 seconds, it just takes up less space. I could do transition-delay which is how long it waits before that transition takes place and in that case, I could do, let’s say, 0 seconds for the time being. Let’s just see if this works out.
As I roll my mouse over, you can see how this affect scales of that picture on the width to 400. You can see how it really just eases right into it. Now if I do a delay of let’s give it a 3-second delay, I’m going to hit refresh and now watch. I’m holding the mouse, nothing is happening. There we go, after 3 seconds, there’s that delay. If I go off then again there’s a 3-second delay and then there it is. It goes back.
--------------------- HTML CODE ------------------
You could make this duration a lot longer if you want. You could make it 9 seconds. Let’s bump it down to 1 second delay, let’s hit refresh and let’s just roll our mouse over it and you can see how slow this transition really goes. You can see it’s going nice and slow, nice and slow and it takes its time of doing it.
In either case, this is a good way of really structuring your easing. Now, the other thing I want to mention is I’ve put these things in the comments as the transition-timing-function.
What’s interesting about the transition-timing is this timing function, you can have kind of different effects like ease-in, ease-out. I could say, “Okay. Well, this one let’s do ease-out.” Let’s just see what this does. I’ll go ahead, right now it’s easing in and let’s just see easing out, there you go. Sometimes what it does is it ramps things up first and then slows it down. Other times, it speeds it up and then slows it down towards the end of the curve. There’s also a linear version where it’s, you know, just linear.
--------------------- HTML CODE ------------------
Typically, I don’t really play around with these, these are great for effects if you’re doing a lot of active things. You can see how this one is just straight at the same constant speed. For me, most of the time the way I write this code and we can do that shorthand property is you can go ahead and do things like, let’s just say, transition. There’s the shorthand, I do all, you might do half a second or even 1 second and then what you’ll do is just ease, okay? Let me just take a look and see if this works, make sure I have the coding right. I’ll go ahead and hit save and as I refresh, boom, there you go. That’s basically how I use it.
--------------------- HTML CODE ------------------
In addition, the other way is I put in maybe the opacity of 0.5 which is good for like buttons and things like that. As you can see as I roll over, you know, you fade in right there. Even if we didn’t have the width, this just creates a really nice easing effect on a roll over. You could even do a 3 second if you want it a little bit slower. You could see how that works.
--------------------- HTML CODE ------------------
Ultimately 1 to 2 seconds, you know, is pretty much all you need to create that nice little roll over effect rather than without that, you know, without that effect, you could see it just kind of – it’s a low effect. It just boom, lights switch on, light switch off whereas, with a 1 to 2-second easing, it gives you that little subtle feel right there which is, you know, a thousand milliseconds.
If you want to use the millisecond, ms command, you go 1,000 milliseconds, and you could do it that way, that gives you the same amount. But if you want to cut that and, let’s say, a little bit you could 400 milliseconds, speed it up a little bit where it’s kind of like a half second.
--------------------- HTML CODE ------------------
In either case, that’s how you use that property. One key point to keep in mind on this since this is fairly new CSS based code, you want to look at additional browsers. Here, for example, I’ll just paste these for you so you could see what they look like and uncomment them is basically Safari and internet explorer are some of the worst to handle it.
Internet explorer 10 right now does handle transition but you can see there’s the webkit-transition and webkit-delay, that’s the way you would write these in Safari. If you wanted to do it all shorthand, you would go something like this. This would affect pretty much three of four browsers.
--------------------- HTML CODE ------------------
You can see webkit, this is the Safari version, and you have the Mozilla then I believe this one’s Opera and then finally the Google Chrome or most general browsers, and that’s why Google Chrome is one of the better or recommended versions to use when you do development works.
Anyways, if I save this right here, and let me just get rid of this last little bit of comment, so I’ll go ahead and hit refresh and make ’s only see here, transition all, let’s just do ease, okay, and doing the same thing, okay, this is all 2 seconds ease with a 2-second delay, okay?
Keep that in mind. That’s a 2-second delay so we’ll have to wait a second. One. Two. You should see it. There we go. If I go off 2-secodn delay, and again one, two. If I didn’t have that 2-second delay, I could make it 0 or just get rid of it, just to show you here what that looks like and now you can see as I do the mouse roll over, it works just fine.
--------------------- HTML CODE ------------------
Anyways, that’s how it works. It’s excellent for menu buttons if you have like a button or something like that, but it’s an excellent transition property. It makes things a little bit easier. There are other timings that you could do beyond ease because you can see I have ease-in, ease-out, step-start, step-end, I never did a step-start.
Let’s take a look at what step-start looks like just out of curiosity, and we can see but otherwise – okay, I don’t see any difference. In either case, there’s a lot of different ones and different effects that you could do with some research on if you cared about it or wanted to see it.
For my point of view, it’s – I just the easing function and that’s pretty much it. But it’s an excellent way to add a little nice subtle transition to your effects to roll overs or just any elements on your page.
