CSS3 Transitions: Bezier Timing Functions

Share this article

In the second part of this series
we looked at the CSS3 transition-timing-function property which controls how an animation varies in speed throughout the duration of the transition. This accepts keyword values such as ease, ease-in and linear which are normally enough for the most demanding CSS developer. However, you can define your own timing functions using a cubic-bezier value. It sounds and looks complicated but can be explained with some simple diagrams. linear transition timing functions The diagram above plots the percentage of the animation complete against time. The line is linear so, in effect, the proportion of the animation completed matches the time, e.g. 50% of the animation is complete half-way through the duration. ease-in-out transition timing functions This diagram shows the ease-in-out
curve:
  • It starts slowly; approximately 12% of the animation is completed in the first 25% of time.
  • It ends slowly; the last 12% of the animation occurs in the last 25% of time.
  • Therefore, the middle 76% of the animation must occur during 50% of the time; it’ll be faster.
In essence, the steeper the curve tangent, the faster the animation will occur at that time. If the line was vertical, the animation would be instantaneous at that point. This is demonstrated in the following diagram: steep transition timing function Half-way through the duration, the animation will jump from approximately 30% complete to 70% complete. We can imagine that all transition animations start at point 0,0; the animation is 0% complete (in its start state) after zero time. Similarly, they will end at point 1,1; the animation is 100% complete (in its end state) at the end of the duration. Therefore, we can define a bézier curve between 0,0 and 1,1.

What’s a Bézier Curve?

bezier curveYou’ll have seen bézier curves used in graphics packages. Given the start point (P0) and end point (P3) of a line, a bézier curve defines two control points for each end (P1 and P2). I won’t even begin to explain the mathematics but, if you’re interested, head over to Wikipedia
or WolframMathWorld for the stomach-turning equations. Luckily, we don’t need to worry about the complexities. Since our animation line starts at 0,0 and ends at 1,1, we just need to define points P1 and P2 in the cubic-bezier value, e.g.
/* cubic-bezier(p1x, p1y, p2x, p2y) */

/* identical to linear */
transition-timing-function: cubic-bezier(0.25,0.25,0.75,0.75);

/* identical to ease-in-out */
transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
Note that the the x co-ordinates of P1 and P2 denote time and must be between 0 and 1 (inclusive). You couldn’t set a negative value since it would start earlier than it was triggered! Similarly, you couldn’t set a value greater than one since time cannot proceed to, say, 120% then reverse back to 100% (unless you have a TARDIS or flux capacitor to hand). However, the y co-ordinates denote the animation completed and can be any value less than zero or greater than one, e.g.
transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);
bounce effect transition timing functions
At approximately 15% of the duration, the animation is -10% complete! Therefore, if we were moving an element from 0px to 100px, it would be at -10px at that time. In other words, we have a bounce effect; head over to cubic-bezier.com and click GO to see it in action.

Let the Tools do the Work

Defining bézier curves can involve trail and error to achieve the effect you want. Fortunately, there are a number of great tools to help you experiment and produce the correct code: In the final part of this series, we’ll look at a couple of advanced transition techniques.

Frequently Asked Questions about CSS3 Transitions and Cubic Bezier Timing Function

What is the cubic-bezier function in CSS3?

The cubic-bezier function is a specific type of timing function in CSS3. It allows you to create custom easing effects for animations and transitions. The function takes four arguments, each representing two control points of a cubic Bézier curve. By manipulating these points, you can create a wide variety of easing effects, from simple linear transitions to complex, multi-stage animations.

How do I use the cubic-bezier function in CSS3?

To use the cubic-bezier function, you need to specify it as the value of the ‘transition-timing-function’ or ‘animation-timing-function’ property in your CSS code. The function takes four arguments, which represent the coordinates of two control points of a cubic Bézier curve. For example, the code ‘transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);’ will create a custom easing effect for a transition.

What are the default control points for the cubic-bezier function?

The default control points for the cubic-bezier function are (0,0) and (1,1). These points create a linear transition, where the animation progresses at a constant speed from start to finish. By changing these points, you can create a variety of different easing effects.

Can I use the cubic-bezier function to create a bounce effect?

Yes, you can use the cubic-bezier function to create a bounce effect. This involves setting the control points to values that cause the animation to move back and forth along the transition path. However, creating a bounce effect with the cubic-bezier function can be complex and requires a good understanding of how Bézier curves work.

How can I visualize the effect of different control points in the cubic-bezier function?

There are several online tools that allow you to visualize the effect of different control points in the cubic-bezier function. These tools typically provide an interactive graph where you can manipulate the control points and see the resulting Bézier curve and easing effect.

What is the difference between the cubic-bezier function and the steps function in CSS3?

The cubic-bezier function and the steps function are both timing functions in CSS3, but they work in different ways. The cubic-bezier function creates a smooth transition that can be customized with control points, while the steps function creates a stepped transition with a fixed number of intervals.

Can I use the cubic-bezier function with the ‘transform’ property in CSS3?

Yes, you can use the cubic-bezier function with the ‘transform’ property in CSS3. This allows you to create complex animations where the element transforms over time according to a custom easing function.

How does the cubic-bezier function relate to animation performance?

The cubic-bezier function can have an impact on animation performance. Complex easing functions that require a lot of computation can slow down animations, especially on lower-powered devices. However, in most cases, the performance impact of the cubic-bezier function is minimal.

Can I use the cubic-bezier function in all web browsers?

The cubic-bezier function is supported in all modern web browsers, including Chrome, Firefox, Safari, and Edge. However, it may not work in older browsers or those that do not fully support CSS3.

What are some common uses of the cubic-bezier function in web design?

The cubic-bezier function is commonly used in web design to create custom animations and transitions. This can include things like hover effects, loading animations, slide-out menus, and much more. By using the cubic-bezier function, designers can create unique and engaging user experiences.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

CSS3HTML5 Dev CenterHTML5 Tutorials & Articleslearn-advanced-csstransitions
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week