It is an inbuilt function in CSS that defines a Cubic Bezier curve. The Bezier curve is the mathematically defined curve used in 2D graphical applications such as (inkspace, adobe illustrator, etc.). This CSS function is the transition timing function, which is used for the smooth and custom transitions.
It is defined by the four points (that are P0, P1, P2, and P3). The points P0 and P3 (called as anchors ) are the starting and the ending points, and the points P1 and P2 (called as handles ) are the middle points.
For CSS Bezier curves, the points P0 and P3 are always in the same spot. P0 is at (0,0) that represents the initial state and initial time, and P3 is at (1,1), which represents the final state and the final time. This means that the parameters passed to the cubic-bezier function can only be between 0 and 1.
Syntax
The below syntax is employed to understand the cubic-bezier function.
cubic-bezier( x1, y1, x2, y2 )
This CSS function requires four required numeric values. The values for x1 and x2 should fall within the range of 0 to 1; otherwise, they will be considered invalid. Providing parameters outside this range will result in the function defaulting to a linear transition with the cubic-bezier(0, 0, 1, 1) value.
We can grasp the functionality of this CSS function through the illustration provided below.
Examples
The example illustrates the cubic-bezier function and its values for various elements by utilizing CSS properties.
Example 1:
This function is compatible with the animation-timing-function and transition-timing-function properties.
Here, we are employing the transition-timing-function property.
<!DOCTYPE html>
<html>
<head>
<title> cubic-bezier() function </title>
<style>
.jtp {
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> Move your mouse over the below div element, to see the transition effect. </p>
<div class = "jtp">
</div>
</body>
</html>
Output
Example 2:
The CSS applies the cubic-bezier function to the button within the navbar element. This function facilitates the transition by specifying the necessary values. By utilizing the circle, we can achieve movement from the bottom left to the top right.
<!DOCTYPE html>
<html>
<head>
<title> cubic-bezier() function </title>
<style>
nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
padding: 3vmin 1vmin;
gap: 2vmin;
background: green;
}
button {
display: grid;
place-items: center;
text-align: center;
color: white;
width: fit-content;
padding: 1vmin 2vmin;
background: orange;
border: 1px solid #302712;
border-radius: 0;
transition: all 0.25s cubic-bezier(0.25, 4, 0.25, 4);
}
button:hover {
scale: 1.2;
background-colour: navy;
border-radius: 1vmin;
color: #fff;
}
a {
font-size: calc(10px + 1vmin);
text-decoration: none;
color: #302712;
}
button:hover a {
color: #eae0c8;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1em;
font-family: system-ui, sans-serif;
}
</style>
</head>
<body>
<h1> The cubic-bezier() Function </h1>
<p> Move your mouse on the button to see the transition effect. </p>
<nav>
<button>
<a href = "#"> Home </a>
</button>
<button>
<a href = "#"> Career </a>
</button>
<button>
<a href = "#"> Contact </a>
</button>
<button>
<a href = "#"> Detail </a>
</button>
</nav>
</body>
</html>
Output
The result displays the cubic Bezier function for buttons.
Example 3:
The demonstration illustrates the linear progression using the cubic-bezier function in CSS. The cubic-bezier function showcases the unbounded potential with transition axis values. Various buttons display the animation and transition effects when hovering over the function.
<!DOCTYPE html>
<html>
<head>
<title> cubic-bezier() function </title>
<style>
.solid_box {
width: 40%;
border: 2px solid #101820;
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
max-width: 30rem;
}
.solid {
width: 60%;
height: 60%;
aspect-ratio: 1 / 1;
background: navy;
border-radius: 5rem;
animation: y 1s cubic-bezier(.12, .57, .63, .21) infinite;
}
.solid-container {
width: 16%;
height: 16%;
aspect-ratio: 1 / 1;
position: absolute;
bottom: -7%;
left: -7%;
animation: x 1s linear infinite;
}
@keyframes x {
to {
transform: translateX(600%);
}
}
@keyframes y {
to {
transform: translateY(-600%);
}
}
@for $i from 1 through 50 {
.solid-container:nth-of-type(#{$i}) {
animation-delay: 0.012s * $i;
opacity: 1 - (0.02 * $i);
.solid {
animation-delay: 0.012s * $i;
}
}
}
body {
background: #fcfcfc;
padding: 2rem;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
min-height: 100%;
}
body,
html {
height: 100%;
}
code {
font-size: 1rem;
padding: 0.5em 0;
display: block;
width: 100%;
max-width: 30rem;
margin: auto;
}
.code-wrapper {
width: 100%;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class='solid_box'>
<h1> The cubic-bezier() Function </h1>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
<div class='solid-container'>
<div class='solid'></div>
</div>
</div>
</body>
</html>
Output
The result displays the cubic Bezier function pertaining to the container.
Example 4:
The illustration demonstrates various containers and elements utilized in the cubic-bezier function. By hovering the mouse over the container, the function is activated through the css feature.
<!DOCTYPE html>
<html>
<head>
<title> cubic-bezier() function </title>
<style>
.jtp {
width: 200px;
height: 50px;
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> Multiple cubic-bezier() Function </h1>
<p> Move your mouse over the elements to see the transition effect. </p>
<div class = "jtp" style = "background: blue;">
</div>
<div class = "jtp" style = "background: skyblue;">
</div>
<div class = "jtp" style = "background: violet;">
</div>
</body>
</html>
Output
The result displays the cubic Bezier function for the container.
Example 5:
The various div elements employ the cubic Bezier function within the inline style declaration. Various transition values can be applied to the cubic Bezier property.
<!DOCTYPE html>
<html>
<head>
<title> cubic-bezier() function </title>
<style>
.jtp {
width: 200px;
height: 50px;
transition: width 2s;
}
div:hover {
width:300px;
}
p{
font-size: 20px;
color: darkviolet;
}
</style>
</head>
<body>
<h1> Multiple cubic-bezier() Function </h1>
<p> Move your mouse over the elements with different transition elements. </p>
<div class = "jtp" style = "background: skyblue; transition-timing-function: cubic-bezier(0,0,1,1);">
transition-timing-function: cubic-bezier(0,0,1,1);
</div>
<br>
<div class = "jtp" style = "background: blue; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);">
transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
</div>
<br>
<div class = "jtp" style = "background: violet; transition-timing-function: cubic-bezier(0,0,0.68,1);">
transition-timing-function: cubic-bezier(0,0,0.68,1);
</div>
<br>
<div class = "jtp" style = "background: darkviolet; transition-timing-function: cubic-bezier(0,0,0.58,1);">
transition-timing-function: cubic-bezier(0,0,0.58,1);
</div>
<br>
<div class = "jtp" style = "color :white; background: navy; transition-timing-function: cubic-bezier(0.42,0,0.58,1);">
transition-timing-function: cubic-bezier(0.42,0,0.58,1);
</div>
</body>
</html>
Output
The result displays the cubic Bezier equation for the container.
Example 6:
The text displays the shadow of the text by employing the transition property. This property incorporates the cubic Bezier function with the necessary value.
<!DOCTYPE html>
<html>
<head>
<title> cubic-bezier() function </title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cb {
text-align: center;
position: absolute;
top: 22%;
left: 28%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
background-color: lightgrey;
color: #fff;
font: 300 5rem / normal Inter, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
#cb1 {
text-align: center;
position: absolute;
top: 36%;
left: 28%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
background-color: lightgrey;
color: #fff;
font: 300 3rem / normal Inter, BlinkMacSystemFont, "Segoe UI", Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
div {
width: max-content;
font-variant: all-small-caps;
text-shadow: 2px 5px 1px #000;
transition: text-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
div:hover {
text-shadow: 15px 15px 1px #000;
}
</style>
</head>
<body>
<h1> CSS cubic-bezier() Function </h1>
<p> Move your mouse over the elements with different transition elements. </p>
<div id = "cb"> CSS Function </div>
<div id = "cb1"> Thank You </div>
</body>
</html>
Output
The result displays the cubic Bezier function applied to the container.
Example 7:
The illustration demonstrates the fundamental CSS cubic-bezier function featuring an emoji animation. Users can observe the emoji and implement the transition using the cubic Bezier function.
<!DOCTYPE html>
<html>
<head>
<title> cubic-bezier() function </title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: skyblue;
margin: 1;
padding: 1;
position: absolute;
top: 20%;
left: 30%;
transform: translate(-50%, -50%);
}
button {
background: none;
border: none;
padding: 0;
margin: 0;
margin-right: 4rem;
cursor: pointer;
outline: none;
width: 45px;
display: inline-block;
font-size: 70px;
transition: transform 0.16s cubic-bezier(0.68, 0.62, 0.17, 1.8) 0.02s,
filter 0.32s linear;
transform-origin: 50% 55%;
}
button:hover,
button:focus {
transform: scale(1.30);
transition: transform 0.05s;
}
button:active {
transform: scale(1.4);
transition: transform 0.04s;
}
</style>
</head>
<body>
<h1> CSS cubic-bezier() Function </h1>
<p> Move your mouse over the elements with different transition elements. </p>
<button>
<span title = "Disappointed"> 😄 </span>
</button>
<button>
<span title = "Smiley"> 😆 </span>
</button>
<button>
<span title = "Neutral face"> 😉 </span>
</button>
<button>
<span title = "Neutral face"> 😍 </span>
</button>
</body>
</html>
Output
The result displays the cubic Bezier function applied to the container.
Conclusion
The CSS cubic-bezier function is employed to achieve smooth transitions and animations within HTML elements. Developers can apply this function to various elements such as buttons, div tags, emojis, and more, enhancing the visual appeal and interactivity of web pages.