# Transitions

Let's look at the `transition` property.

Browsers used to be much more simple. It wasn't so long ago that they couldn't render images or handle more than a handful of fonts. Then CSS gave us power over how web pages look and feel.

Animation in browsers isn't new. Flash, Canvas and other JavaScript options have given us ways to animate but more recently CSS has become a viable option.

## Transitions

One way CSS lets us control animation in the browser with the `transition` property. In browser terms, a transition is an animation from one state to another.

![Transitions: A to B](images/ab.png)

When we use a transition on an element we tell the browser that we want it to _interpolate_, or automatically calculate, the change between states.

![Animated transition from A to B (http://codepen.io/donovanh/pen/RNdxqw)](images/ab_animated.png)

For example we can change an element's style on hover, apply a transition, and the browser will create a smooth animation between the element's starting style and it's new style.

![Animated button (http://codepen.io/donovanh/pen/MYQdZd)](images/button.png)

## Transition properties

When we use a transition on an element, there are all sorts of properties that change how the transition works. We can make it slow or fast, delay it, and even control the rate of change using timing functions. We'll delve into what these mean next week, but here's a nice example of what happens when we combine several transitions:

![Combining transitions (http://in-ni.com/)](images/winnie-min.gif)

Another example of combined transitions:

![More transitions (http://codepen.io/suez/pen/XJGOyL)](images/transitions-min.gif)

Soon we will discuss how to use transitions to make these sorts of movements.

## In summary

A transition is the change from one state to another. For example, when hovering over an element, its style might change. Transitions allow the change to become a smooth animation.

## Homework

How's your creative environment looking? How about taking a look into the code, and looking for the `transition` property in the CSS. Can you see what it's doing?

Next time you're browsing the web, look for examples of transitions as you navigate web pages. Look for interesting changes such as when a new element is added to a page, or you hover over a button. You'll find the web is full of subtle animation once you start looking for it.

**Next:** An overview of the `animation` property and how it differs from `transition`.