cubic-bezier Archives

The CSS cubic-bezier() function specifies a Cubic Bezier curve.

A Cubic Bezier curve is specified by four points (P0, P1, P2, P3). P0 and P3 are the starts and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

The cubic-bezier() function you can use with the transition-timing-function property and the animation-timing-function property.

Syntax:

cubic-bezier(x1,y1,x2,y2);

x1,y1,x2,y2 – numeric values (x1 and x2 must be a number from 0 to 1).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.8, 1.0, 0.2);
}

.square:hover {
  width:300px;
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:

Hover over the div element below, to see the transition effect:

Enjoy coding!