Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Understanding the cubic-bezier() function in CSS

Saturday, August 9th, 2014 by Servage

Understanding Bezier CurveProgrammers have to routinely deal with graphic design software, which means we are quite familiar with graphic design terminology. One of the more ubiquitous terms, Bezier curve, allows designers to manipulate the control points of convex hulls to create smooth curves in vector drawing software. Corel Draw and Illustrator are 2 prime examples of software that utilize the Bezier curve tool.

This article is less concerned with Bezier curve from the graphics designer perspective, and instead focusses on understanding Bezier curve with regards to animators using CSS. Yes, CSS has a “cubic Bezier() Function” and it operates on the parametric Bezier curve fundamentals. There are many kinds of Bezier curves, but cubic Bezier curves are the most popular and useful in much of the animation coding in CSS.

As the name suggests, cubic Bezier curve has four points, if you understand it from the graphical perspective. The first one is always at (0,0) on the x and y-axis of the graph at the bottom left. It serves as a starting point in time means (t0). Opposite of this is the last, or fourth point, which is located on the top right of the graph, its value being (1,1) or (t1). Consequently, the second and third points are given leeway to manipulate the Bezier curve in customized ways. In the time image below, I have placed moving handles of the control points and shown the different values.

Cubic Bezier Curve in Coding

Fundamentally, we realize there are two points, which determine direction, smoothness, and most importantly, transition timing of the Bezier curve-based animations. We can then say this functions as a transition timing function. It has values of x and y coordinates, and these two points are coded in the following manner:

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

From here, we can see the power of the four values which determine the smoothness of the curve. In graphic design software, you move the hulls or handles of control points 2 and 3 (as 1 and 4 remain static), and you change the values of their coordinates. In parametric terms, you begin with zero value in time (t=0) and reach an end value you have defined (i.e. here it is 1 second, t=1). Therefore, the transition points may be (t=.25), (t=.5), and (t=.75) in a cubic curve with four segments as described in the image below.

bezier-curve-animation.png

Understanding Transition Timing Function Syntax

When moving handles of a curve, we can increase or decrease the curvature. This action makes a curve flat or with more tangents at any point that you move the handle. When you increase the curvature, it may take more time to travel; thus, your animation may slow slightly, until you pass that curvature. Conversely, it becomes rapid if it goes in a straight line. The increase in curvature is expressed as “ease” in animation parlance. As a result, you will have some four to five curvature positions that are defining the different terms, such as:

  • Ease (default): smooth curvature throughout.
  • Linear: No curve at all.
  • Ease In: smooth curve at the beginning i.e., slow beginning
  • Ease Out: smooth curve at the end i.e., slow end
  • Ease In-Out: smooth curves at beginning and at the end i.e. slow animation at both ends, but rapid at mid portions.

Let’s translate these keywords to the coding:

Ease (default):

/* The ease keyword and its cubic-bezier() equivalent */

transition-timing-function: cubic-bezier(.25, .1, .25, 1);

Linear:

/* The linear keyword and its cubic-bezier() equivalent */

transition-timing-function: cubic-bezier(0, 0, 1, 1);

Ease In:

/* The ease-in keyword and its cubic-bezier() equivalent */

transition-timing-function: cubic-bezier(.42, 0, 1, 1);

Ease Out:

/* The ease-out keyword and its cubic-bezier() equivalent */

transition-timing-function: cubic-bezier(0, 0, .58, 1);

Ease In-Out:

/* The cubic-bezier() equivalent of the ease-in-out keyword */

transition-timing-function: cubic-bezier(.42, 0, .58, 1);

No doubt, you can customize these Bezier curves by jumping outside the 0-1 range. You may go with 2 or even in a negative direction, say with -.5. The available options allow you to obtain awesome results in your animations by way of CSS programming.
References & More Reading
Understanding CSS Timing Functions
Drawing Bézier Curves

 

 

Understanding the cubic-bezier() function in CSS, 3.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.