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.
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.
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.
What’s a Bézier Curve?
You’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 thecubic-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);
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 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.