Lynda HTML5 For Flash Developers

So of all the new features in CSS3, the thing that's going to be of most interest to a lot

of Flash developers are CSS transitions.

And this allows you to do some really nice animation effects purely with CSS3.

So in my document here I just have a div at the bottom with an ID of box, and then some

CSS rules at the top making it 200x200.

I've set the position to absolute, so that we can animate this around the screen with

a background-color of blue, and that's what it actually looks like over in Chrome.

So with CSS transitions, I can basically say that a certain property on this box is going to be animated.

So anytime that that value is actually changed, whether it's via other CSS code or via JavaScript,

it will automatically do a transition to that new value.

So much like I showed you in the last movie, we're going to have to use vendor specific prefixes here.

I'm going to use -webkit, because again, we're in Google Chrome which is webkit based.

But we're going to start writing some transition code for this box.

So it's going to be -webkit-transition.

And the first we're going to set is which property do we actually want to animate.

So I'm going to put in property and this can be any valid CSS property.

So let's just start with the left property.

So this will allow me to transition any time that I change that left property, either via CSS or code.

And I'm just going to copy this line and paste it down.

The next thing that I need to give is the duration.

So how long do I want this to actually take? And I can give the number either in seconds

or milliseconds, but I am going to give it 0.4s, which is four seconds.

I am going to paste another one down below.

Now the next is the timing function and this essentially controls the easing.

So I'm going to be timing-function and there's a bunch of built-in ones, and I'm to use the

ease-in-out function and there is also obviously ease-out, ease-in.

And you can also give it a customized timing function if you want, but we're not going

to cover that here.

So the last thing that we can give is a delay.

So let's say that as I change that left property I want it to wait may be a few seconds before

that transition actually happened, I can give this delay property.

I'm actually not going to use this, so I am going to put in zero seconds here.

So now this is actually setup, so that any time that left CSS property is changed, it's

actually going to do an animation to that new value over 0.4

seconds using the ease-in-out function.

So let's go ahead and make that left value change.

So what I am going to do is to add a hover CSS property onto that box.

And this is actually going to happen any time I mouse over that div.

So all I am going to do is change the left property to, let's say, 500 pixels.