Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of cubic-bezier() CSS function
The CSS cubic-bezier() function allows you to define custom timing functions for animations and transitions using cubic Bézier curves. This gives you precise control over the acceleration and deceleration of your animations.
Syntax
selector {
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
animation-timing-function: cubic-bezier(x1, y1, x2, y2);
}
The four parameters define two control points for the curve, where x1, y1 is the first control point and x2, y2 is the second control point. All values must be between 0 and 1.
Parameters
| Parameter | Description | Range |
|---|---|---|
x1 |
X coordinate of first control point | 0 to 1 |
y1 |
Y coordinate of first control point | Any number |
x2 |
X coordinate of second control point | 0 to 1 |
y2 |
Y coordinate of second control point | Any number |
Example: Custom Transition Timing
The following example demonstrates a custom cubic-bezier timing function for a width transition ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
transition: width 2s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
margin: 20px 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.container:hover {
width: 250px;
}
p {
font-family: Arial, sans-serif;
color: #333;
}
</style>
</head>
<body>
<p>Hover over the container to see the custom timing effect:</p>
<div class="container">Hover Me</div>
</body>
</html>
A colorful rounded box appears that smoothly expands with a bouncy, elastic timing when hovered. The animation has a distinctive acceleration and overshoot effect due to the custom cubic-bezier curve.
Common Cubic-Bezier Presets
| Name | Cubic-Bezier Values | Effect |
|---|---|---|
| Ease | cubic-bezier(0.25, 0.1, 0.25, 1) |
Default smooth transition |
| Ease-in | cubic-bezier(0.42, 0, 1, 1) |
Slow start, fast end |
| Ease-out | cubic-bezier(0, 0, 0.58, 1) |
Fast start, slow end |
| Ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
Slow start and end |
Conclusion
The cubic-bezier() function provides complete control over animation timing curves. Experiment with different values to create unique motion effects that enhance your user interface animations.
Updated on: 2026-03-15T13:29:23+05:30
298 Views
Advertisements