/    /  CSS cubic-bezier

CSS cubic-bezier

 

It is an inbuilt function in CSS that specifies a Cubic Bezier curve.

A Cubic Bezier curve is specified by four points P0, P1, P2, and 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 initial state, P3 is (1, 1) and represents the final time and final state.

 

CSS Syntax:

 

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

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<title> cubic-bezier() function </title>
<style>
.cubic{
width: 200px;
height: 50px;
background: blue;
transition: width 3s;
animation-timing-function: cubic-bezier(.59,1.01,0,.01)
}
div:hover {
width:300px;
}
p{
font-size: 20px;
color: darkviolet;
}

</style>
</head>
<body>
<h1> The cubic-bezier() Function </h1>
<p>mouse over the below div element, to see the transition effect. </p>
<div class = "cubic">
</div>
</body>
</html>

 

OUTPUT:

 

CSS cubic-bezier