skip to content

CSS: Transition Timing Functions

This article follows on from the related article on Animation using CSS Transforms and investigates the transition-duration and transition-timing-function properties which control, respectively, the duration and speed at which a transition is carried out.

The examples on this page will currently only work if you download a WebKit Nightly Build web browser now work in Safari 5, Chrome 6, Opera 10 and Firefox 4 Beta. They will not work in Internet Explorer.

Transition Timing Function Options

The transition-duration property is simple to understand. It defines the total duration of a transition from state A to state B, whether the transition involves scaling, distorting, rotating or modifying the style of an element.

The transition-timing-function is more difficult as it defines the rate at which the transition is carried out, which can involve speeding up and slowing down. It's all got something to do with Bézier curves as described here:

The transition-timing-function property describes how the animation will proceed over time. Keywords can be used for common functions or the control points for a cubic bézier function can be given for complete control of the transition function.

Rather than trying to work out what all that means, lets look at the keyword values for this property and how they affect a simple translation across the page. Move your mouse over the field below and the green boxes should all take off in a race across the page.

Each box undergoes the same transformation, but they all use different transition timing functions as shown by their labels. These are explained in more details below.

default »
linear »
ease-in »
ease-out »
ease-in-out »
cubic-bezier »

You can certainly see the effect of different transition timing functions on the animation. Of the named functions the ease-out box is fastest out of the blocks with ease-in lagging at the back. The default setting seems to be a slightly accelerated version of ease-in-out. And all of them complete the trip at more or less the same 2 seconds.

The cubic-bezier option let's you specify your own curve by defining two points. The curves used for the above display are illustrated in the next section, apart from linear which I hope speaks for itself.

What are Bézier Curves?

The model used to generate different timing functions is based on cubic bézier curves which are described in the Surfin' Safari blog as follows:

To specify a cubic bezier function, you give an X and Y values for 2 of the control points of the curve. Point P0 is implicitly set to (0,0) and P3 is implicitly set to (1,1). These 4 points are used to compute a cubic bezier curve.

In the same article they provide the values used to generate the 'named' options which allow us to illustrate the different curves. Below each graph you can see the name of the timing function and the coordinates of P1 and P2 used to plot the curve. For the last curve we've defined the coordinates ourselves using the cubic-bezier option:

default
default
(0.25, 0.1), (0.25, 1)
ease-in
ease-in
(0.42, 0), (1, 1)
ease-out
ease-out
(0, 0), (0.58, 1)
ease-in-out
ease-in-out
(0.42, 0), (0.58, 1)
cubic-bezier
cubic-bezier
(0, 1), (1, 0)

The mechanics of Bézier curves are described in detail on Wikipedia as follows:

Four points P0, P1, P2 and P3 in the plane or in three-dimensional space define a cubic Bézier curve. The curve starts at P0 going toward P1 and arrives at P3 coming from the direction of P2.

There's a bit more to it than that of course as you can find out on that page, but what's important is that you see how the five graphics above match the movements of the five boxes in the previous section. The x-axis represents time and the y-axis the displacement (horizontal in this case).

These graphs have been generated using BezierText 1.0.1 (freeware) for OSX

Now available in Safari

As of Safari 3.1 (March 2008) these CSS properties are now recognised by default so they work for all up-to-date OSX users. So brace yourself - this could be the scariest addition to the web since animated backgrounds!

Image Fade and Special Effects using CSS

Here's an interesting use for CSS transitions - a dynamic fade from one photo to another. When you mouseover the photo of Hilary it will fade gracefully into a photo of Barak. Move the mouse away and the transition is repeated in reverse.

Here are the styles used for this effect (no JavaScript required):

<style type="text/css"> div.fader img { -webkit-transition: all 1s ease-in-out; } img.swap1, div.fader:hover img.swap2 { opacity: 1.0; } div.fader:hover img.swap1, img.swap2 { opacity: 0; } </style>

Here's another interesting effect - a progress bar that counts off 5 seconds in half-second intervals. To start the animation just hold your mouse over the line of boxes and wait.

10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

Again, this is achieved using no JavaScript and very little CSS. It's a bit of a hack, but surprisingly effective:

<style type="text/css"> table.fader2 td { background: red; -webkit-transition-property: background-color; -webkit-transition-timing-function: cubic-bezier(1,0,1,0); -webkit-transition-duration: 0.5s; } table.fader2:hover td { background: green; } </style>

Note: to get these examples working in Opera you need to use the -o- prefix instead of (as well as) -webkit-. For Firefox the prefix will be -moz-.

So what do you think? Is this the 'Flash killer' that we've been waiting for?

< CSS


Like Tweet     Bitcoin

User Comments and Notes

Gail Lang 20 August, 2010

I'm using FireFox 3.6.8 and these transition examples didn't 'transition' at all, they just instantly changed, all of them. I would love to see how they work since I'm currently learning HTML5 & CSS3, is there anything I can do?

You just need to install Safari, Chrome or Opera.

Forrest Swilling 20 September, 2010

Nice work; great visual examples!

Kent Davidson 10 December, 2010

Wow, these examples are really cool!

Gotta wonder, though, is the lack of Microsoft support going to kill these awesome features, again? I just finally deprecated all IE6 support only to now have nothing in HTML5 supported by MS, yet... Any idea whether they will?

And if they will, will they do it correctly?

There's only limited support for CSS3 and HTML5 in IE9 so it's going to be a couple of years at least

immysl 14 December, 2010

@Gail Lang Firefox 4+ supports CSS3 transitions but not other versions

Nande! 23 December, 2010

Hey, thanks for the examples of bezier curves as a way to calculate interpolations, i've been trying to make something similar without getting good results.
but with your examples it all went fine!
if you have more examples (like control points for the bezier curve) it'll be awesome!

ricardo 17 January, 2011

Excelent!!!

Is there any way to to that without the hover? I mean, the transition start without the rollover?

To have the animation start automatically (without JavaScript) you need to set up keyframes, as demonostrated in this article.

David Karlins 16 February, 2011

Something seems to be missing from my understanding of the concept here. Do these examples all require JavaScript? How is the triggering event defined in these -- IE, where is the "hover" element coming from? Is this part of CSS3?

No, it's only CSS -just not supported by IE.

Kevin 12 March, 2011

I've recently upgraded firefox to the new 4.0 beta and all the transitions work great. Very nice examples by the way =)

Dawn 19 March, 2011

In the Transition Timing Function Options example, all you have to do is hover over the body and all the boxes move. How do you do that?

The shaded area has an id value of "stable" and each box has a class of "showbox". The CSS to trigger the animation then is something like this:

#stable:hover .showbox {
-webkit-transform: translate(590px,0) rotate(5deg) skew(-15deg,0);
}

So when #stable experiences a ':hover' event, all the child boxes are translated and transformed. Each box also has it's own transition-timing-function assigned in the HTML.

le hollandais volant 30 June, 2011

I don't understand how tha last example works : each <td> works individually, but there is only one hover ?

Normally, all the <td> have to go green at the same time… Isn't it ?

The trick is that each box undergoes the same transition, and starting at the same time, but the durations are different. It also uses a cubic-bezier function that is very steep at the end of the transition.

V0R73X 8 July, 2011

Hi. I really like these transition effects. I was testing the same thing for background-image instead of background color, but it's not working. I'd like to know your results for this.

Transitions only work on 'scalar' values. During the transition the value gradually changes from the original value to the target value, passing through points in between.

For a background-image there are no intermediate points so there won't be any transition.

id meneo 7 September, 2011

Man I'm so proud I figured out how to make an automatic fade with well positionned images. It was originally working with the cycle plugin: www.id-meneo.com/novencia/

Send Feedback

Use this form to send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

CAPTCHA refresh

<- copy the digits from the image into this box

press Esc or click outside this box to close

Load Feedback Form

top