The cubic-bezier() function is a powerful CSS timing function that allows for the creation of custom acceleration curves for animations and transitions. It is defined by four control points, P0, P1, P2, and P3. P0 and P3 are always set to (0,0) and (1,1) respectively, representing the start and end of the animation. The function's arguments specify the coordinates of P1 and P2, cubic-bezier(x1, y1, x2, y2), which dictate the shape of the curve and thus the speed of the animation over its duration. This enables fine-grained control over the easing, allowing for unique and natural-feeling motion.
Example 1: Ease-in-out-like Custom Curve
<!DOCTYPE html>
<html>
<head>
<title>Cubic Bezier Example 1</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 2s cubic-bezier(0.42, 0, 0.58, 1); /* Custom ease-in-out curve */
}
.box:hover {
transform: translateX(400px); /* Move the box on hover */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explanation: This cubic-bezier(0.42, 0, 0.58, 1) function creates a custom timing that is very similar to the standard ease-in-out keyword. The animation starts slowly, accelerates through the middle part of its duration, and then slows down again towards the end, providing a smooth and symmetrical transition.
Example 2: Fast Start, Slow End
<!DOCTYPE html>
<html>
<head>
<title>Cubic Bezier Example 2</title>
<style>
.circle {
width: 80px;
height: 80px;
background-color: #e74c3c;
border-radius: 50%;
transition: opacity 2s cubic-bezier(0.1, 0.9, 0.9, 0.1); /* Fast start, slow end curve */
}
.circle:hover {
opacity: 0; /* Fade out the circle on hover */
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Explanation: The curve defined by cubic-bezier(0.1, 0.9, 0.9, 0.1) creates a very energetic effect. The animation begins extremely quickly and then decelerates dramatically towards the end. This can be used for effects that need to grab attention immediately and then settle down.
Example 3: The "Bouncing" Effect
<!DOCTYPE html>
<html>
<head>
<title>Cubic Bezier Example 3</title>
<style>
.shape {
width: 120px;
height: 120px;
background-color: #9b59b6;
transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncing effect curve */
}
.shape:hover {
transform: scale(1.5); /* Scale up the shape on hover */
}
</style>
</head>
<body>
<div class="shape"></div>
</body>
</html>
Explanation: By providing y-values that are outside the typical 0 to 1 range, such as in cubic-bezier(0.68, -0.55, 0.27, 1.55), we can create a "bouncing" or "overshooting" effect. The animated property will go beyond its final value before settling back, which simulates a physical bounce.
Example 4: Gentle Ease-out
<!DOCTYPE html>
<html>
<head>
<title>Cubic Bezier Example 4</title>
<style>
.loader {
width: 0px;
height: 10px;
background-color: #2ecc71;
animation: load 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; /* Gentle ease-out loading bar */
}
@keyframes load {
to {
width: 100%; /* Animate width to 100% */
}
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>
Explanation: The function cubic-bezier(0.25, 0.1, 0.25, 1) provides a custom curve that starts relatively quickly and then gently eases to a stop. This is a common and visually pleasing effect for elements like loading bars or progress indicators, making the end of the animation feel smooth and polished.
Example 5: Linear with a Slight Ease
<!DOCTYPE html>
<html>
<head>
<title>Cubic Bezier Example 5</title>
<style>
.mover {
width: 50px;
height: 50px;
background-color: #f1c40f;
position: relative;
animation: move-right 4s cubic-bezier(0, 0, 1, 1) infinite alternate; /* This is equivalent to 'linear' */
}
@keyframes move-right {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<div class="mover"></div>
</body>
</html>
Explanation: The cubic-bezier(0, 0, 1, 1) timing function is mathematically equivalent to the linear keyword. It creates an animation that proceeds at a constant speed from start to finish with no acceleration or deceleration, useful for continuous, steady movements like marquees or background scrolls.