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.