Hi, everybody.
In this lecture we're going to talk about transitions.
You've seen in different examples that we can change the state of elements.
Links can go from regular link to visited.
You can hover over things.
You can focus them.
Well, what if you want to actually have a little bit of almost animation
when you do these things?
That's what we can use transitions for.
So if you hover over the link, you can change the color.
If an image comes into focus,
meaning you've tabbed into it, you can change the size.
And it's just these little tiny things that sometimes,
when you're making your page, gives you that little bit of cool factor that you've
been looking for, to show that you're really starting to grasp these concepts.
So let's get started.
If you want to add transitions to your page,
there's four properties that you're going to want to look at.
The first is the actual transition property.
What is it that you want to change?
Do you want to change the size, the color, the position, all of them?
What about the transition duration?
How long should each transition last?
They can happen very quickly, where people almost don't even notice it, or
it can be really long and drawn out.
The transition timing is, it's a little bit odd, but it's this idea of,
if you're going to make something bigger, do you want to make it slowly bigger and
linear all at the same time or do you want it to ease in or ease out?
You can actually change how, kind of what speed it's doing the different things.
Transition delay is, do you want me to wait,
should the browser wait before it starts to transition?
If somebody's hovering, do you want them to hover for two seconds before you go on?
You might want to think about this, because sometimes when
people are looking at your page, they've got, just got the mouse going all over.
And you don't want to have them looking at the transitions unless they really need to
be focusing in on that one element.
All right.
So let's go ahead and get started.
If you want to use transitions, the first thing you need to do is
just what you've been doing all along, define your element and
say what style you want it to have when you first load the page.
Next, you want to choose which elements you want to transition.
So you may have styled it with background color, color, width, and height.
You don't necessarily want to change all of those things
when you go into your transition.
So pick the ones that you do want to change.
Third, define the new values for those elements.
And this is important.
You need to combine this step with a pseudo-class.
It needs to be along with a hover or a focus or an active.
So let's look at some code just on the screen, and
then I'll run you through an actual example.
So here, I've went, I went ahead and defined a div to just have color,
background, line height, width height, all the typical things.
If you notice, the border radius is pretty small.
It's only six pixels.
Next, I went in and I said, you know what, I'm going to go ahead and
define each one of these properties.
So my properties I want to change are going to be color, width, background,
and border radius.
This is kind of a lot, but I wanted a big example.
You can say, I want it to take half a second,
I want it to all be pretty much the same change, and
I want you to wait a half a second before you start that transition.
The last step, the one that had to do with the pseudo-class,
was adding the div:hover and giving the new values that I want everything to be.
So instead of being black, I want to switch it to white.
Instead of the width being 250 pixels, I want it to be 350,
different background color, and a much bigger border radius.
All right? So let's go ahead and
look at an example that I have.
I already coded up to show you.
So in this example I've used an internal style sheet,
partly because the entire bulk of my HTML is right down here.
All I have is one div.
How I've styled it is to say that for now on when someone hovers over this div,
I want you to change the color with background and border radius.
And I've also put in active,
just cuz I wanted to show you that you can do multiple different states.
Active, if you've, maybe don't recall, is when you're clicking down on a state.
So let's take a look.
Here's my transition, just by default, when you're looking at the page.
Now, when I mouse over it,
you can see that it's kind of this cool change of color and border radius.
Border radius actually can change things from looking like a square
to looking like a circle.
The final one is now I'm going to hold the mouse down and
we're going to see what happens when the state goes into active.
You can see, once again, I've changed all those things.
I actually think this is pretty cool.
It can also, however, be very distracting.
So you want to use transitions sparingly
to make sure you're not taking away things from your page.
It is possible and
very common to use shorthand when you're writing out your different transitions.
Instead of writing transition duration,
properties, different things like that, you can put it all in one line.
This one is saying I want to change the background, it should take .2 seconds, and
I want to ease out or I want it to be a linear transition.
Here, it's saying I want to go ahead and change the border radius, how long it
should take, the type of transition, and how long you want to delay.
So when you look at other people's code,
don't be confused if it doesn't look like my first example.
They've probably been using the shortcuts.
All right.
So hopefully that was a little bit cool and you're excited to go and
implement some sort of transitions on your page.
Playing with them will also do more than make your site look kind of
colorful and active.
It's going to give you practice on understanding these different
pseudo-classes and states such as active, focus, hover, etc.
But please remember that accessibility is always going to be an issue
when you're dealing with different states on page.
Don't require that people are going to hover on your page.
Don't require that people are going to tab through.
You want to make sure that all your content is always available, and
just keep those transitions for something a little bit extra to add to your site.
Good luck.