CSS Function - cubic-bezier()

Quiz

CSS cubic-bezier() function defines a custom cubic bezier curve for animations. It is used with the transition and animation to control the animation speed and smoothness. A Bezier curve smoothly connects points and helps to create a smooth animation by controlling the speed change.

Syntax

The syntax for the CSS cubic-bezier() function is as follows:

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

Parameters

CSS cubic-bezier() function accepts four numeric values x1, y1, x2, y2. The x1 and x2 control the time progression whereas the y1 and y2 control the speed of the animation.

The range of x1 and x2 should be between 0 to 1 whereas the range of y can be any number.

Examples of CSS cubic-bezier() Function

The following examples illustrate the use of the CSS cubic-bezier() function.

Ease-In Effect with cubic-bezier() Function

In this example, we have used the CSS cubic-bezier() function to create an ease-in effect. In ease-in effect, animation starts slow and then speeds up.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ease-In Effect with CSS cubic-bezier() Function</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background: #04af2f;
            position: relative;
            animation: move 2s cubic-bezier(0.42, 0, 1, 1) infinite alternate;
        }

        @keyframes move {
            0% {
                left: 0px;
            }

            100% {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <h2>CSS cubic-bezier() Function</h2>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

Ease-Out Effect with cubic-bezier() Function

In this example, we have used the CSS cubic-bezier() function to create an ease-out effect. In the ease-out effect, the animation starts fast and then slows down.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ease-Out Effect with CSS cubic-bezier() Function</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background: #04af2f;
            position: relative;
            animation: move 2s cubic-bezier(0, 0, 0.58, 1) infinite alternate;
        }

        @keyframes move {
            0% {
                left: 0px;
            }

            100% {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <h2>CSS cubic-bezier() Function</h2>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

Ease-In-Out Effect with cubic-bezier() Function

In this example, we have used the CSS cubic-bezier() function to create an ease-in-out effect. In the ease-in-out effect, the animation starts slow then speeds up, and then finally slows down.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ease-In-Out Effect with CSS cubic-bezier() Function</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background: #04af2f;
            position: relative;
            animation: move 2s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
        }

        @keyframes move {
            0% {
                left: 0px;
            }

            100% {
                left: 200px;
            }
        }
    </style>
</head>
<body>
    <h2>CSS cubic-bezier() Function</h2>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

Custom Effect with cubic-bezier() Function

In this example, we have used a custom combination of values.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ease-In Effect with CSS cubic-bezier() Function</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background: #04af2f;
            position: relative;
            animation: move 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
        }

        @keyframes move {
            0% {
                left: 40px;
            }

            100% {
                left: 200px;
            }
        }
    </style>
</head>
<body>
    <h2>CSS cubic-bezier() Function</h2>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

CSS cubic-bezier() Function with Transition

In this example, we have used transition with the cubic-bezier() function to scale and change the background color of the button.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cubic Bezier Transition</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        
        .btn {
            background-color: #031926;
            color: white;
            padding: 15px 30px;
            font-family: Verdana, sans-serif;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.5s;
        }

        .btn:hover {
            transform: scale(1.3);
            background-color: #052c43;
        }
    </style>
</head>
<body>

    <button class="btn">Hover</button>

</body>
</html>

Supported Browsers

Function
cubic-bezier()	16	12	4	6	12.1

Print Page