Wahay, the fun stuff. Transitions can add a lot of character and excitement to a page quickly and easily, so we no longer have the need to piggy back onto Flash, the 3rd party alternative. We can control the animation, with the browser.

One thing we have to be very aware of though, amongst all the other CSS3 properties used in the blog, they should only be used in the experience layer of the website. This is to say, do not make it valuable to the design, because if the browser doesn’t render it, then you’re screwed. In short.

So, disclaimer out the way lets have a look at what we can do with CSS3 Transitions.

Here is a simple picture of a Bugatti Veyron, my future company car.

Now if you hover over the Veyron you will see it decides to take off across the screen.

So how does that work? Well we have a simple transition added to the Veyron class such as the one below.

-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;

We add these to the normal state, where the parameters for the Veyron are created.

  .veyron {
width: 97px;
height: 77px;
background: url('images/veyron.png);
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
}

Then in the hover state we simply declare the actions we would like to see. In this case it is to change the background position 500px to the right.

.square:hover {
	background-position: 500px 0px;
}

So what does -webkit-transition: all 1s linear; mean? Well, the first part is the vendor prefix as we have previously discussed in border-radius. This is a shorthand call for the three different selectors the transition property needs.
In its true form transition selectors look like this…

-webkit-transition: all;
-webkit-transition-timing: 2s;
-webkit-transition-timing-function: linear;

I have simply shorthanded the call, timing and timing-function into one easy selector. Much like

background-color:
background-image:
background-position:

can be shorthanded to.

background: #000 url(images/image.png) 30px 10px;

Given my example above, you can see that :all 2s linear; is much faster to write and weighs less on the stylesheet.

-webkit-transition-timing-function: linear; this selector and it’s values is the one of most importance, here is where you would dictate your animation style. There are 6 options including default; I will give you examples of them here.