CSS: Transition Timing Functions

 Tweet30 Shares0 Tweets16 Comments

This article follows on from the related article on Animation using CSS Transforms and covers the transition-duration, transition-timing-function and other related CSS3 properties which affect the timing of animations.

The examples on this page will work in most modern browsers, including Internet Explorer 10, with no prefix. For some older browsers and mobile devices the -webkit-, -moz- and -o- prefixes may be required. Internet Explorer 9 and earlier have no support for CSS3 transitions.

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 balloon has been assigned a different timing function controlling it's progression as it floats from the bottom of the box to the top. The labels show which of the named timing functions has been assigned, apart from the last balloon to which a custom timing function has been assigned, namely cubic-bezier(0,1,1,0), causing it to pause half way.

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 in the same 3 seconds. Here is the relevant HTML and CSS:

expand code box

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, except for 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 (0.25, 0.1), (0.25, 1)

ease-in (0.42, 0), (1, 1)

ease-out (0, 0), (0.58, 1)

ease-in-out (0.42, 0), (0.58, 1)

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).

Check out this great resource for generating your own custom Bézier curves online. Remember you're not limited to using anchor points inside the box.

The graphs above were generated using BezierText 1.0.1 (freeware) for OSX

Image Cross Fade

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):

This needs to be confirmed, but it appears some browsers now support transitions applied to background images - handling the cross-fade automatically.

Timer using transition-delay

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.

Again, this is achieved using no JavaScript and very little CSS. It's a bit of a hack, but surprisingly effective. The trick is to assign a transition-delay to each box to make them fire in sequence:

The cubic-bezier(1,0,1,0) represents a curve that starts out flat and then rises sharply at the end of the transition period. You could also achieve this effect using the steps timing funciton.

Thinking outside the box

As hinted at earlier, using Bézier points outside the standard range of (0,0) to (1,1) can produce some very interesting effects, especially for those interested in more realistice movement effects.

Note in particular the behaviour of the last two balloons. By using coordinates higher than 1.0 we've created an animation that overshoots the target and then returns. The final example overshoots the mark in both directions causing a bounce/settling effect.

Here is the relevant CSS for these transitions:

The only change between this and the first example is that we've used different transition timing functions. There are also cases where the animated elements can be made to start off moving in the wrong direction.

Stepping it up

A little known option for transition timing functions is the steps function. This replaces the smooth transitions with a series of distinct steps. You can control how many steps to use in the transition, and whether the action occurs at the start or at the end of each step.

In this example when you move your mouse over the box it will fill up from left to right with a red shade using steps(10, start), and from the bottom with a blue shade using steps(10, end). There are 10 steps spread over a 5 second interval so they occur every 0.5 seconds.

You will see the red shade appear immediately from the left and cover the entire width at the 4.5 second mark. The blue shade will appear after 0.5 seconds and fill the box at the 5 second mark. That is the only real difference between using 'start' and 'end'.

If you're using an old browser or mobile device then to get these examples working in WebKit add the -webkit- prefix and for Opera the -o- prefix. For Firefox the prefix is -moz-. Internet Explorer 9 and earlier do not support CSS3 transitions.

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

Related Articles - Transforms and Transitions

• CSS Transition Timing Functions
• CSS Animation Using CSS Transforms
• CSS Upgraded fading slideshow
• CSS Bouncing Ball Animation
• CSS Infinite Animated Photo Wheel
• CSS Animated Background Gradients
• CSS An actual 3D bar chart
• CSS Photo Rotator with 3D Effects
• CSS 3D Transforms and Animations
• JavaScript CSS Animated Fireworks
• JavaScript Animating objects over a curved path
• CSS Fading slideshow with a touch of JavaScript
• JavaScript Controlling CSS Animations

< CSS

User Comments