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.

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.

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.

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 in the next chapter.

Another example of combined transitions:

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.