CSS cubic bezier generator

What is cubic bezier in css

The CSS cubic-bezier() function helps to make different kinds of animations easier. Also, such animations can be smoother and the developer has more control over the animation. Using the cubic bezier function we can set precise timings for animation using a mathematical Bezier curve. This function uses 4 numbers, that represent control points of the Bezier curve. These dots determine how animation is changing over time. The first 2 values represent the first dot, and the last one represents the second dot. So, basically, we can write CSS cubic-bezier function like this, for better understanding:

How to use cubic bezier in CSS

As I said, cubic bezier can help us make better animation. So, you can add cubic-bezier to any animation, both for transition and animation properties based. Almost whenever you can use default linear, ease, ease-in, ease-out, ease-in-out properties, you can replace it with cubic bezier. To do it, you should just copy the cubic-bezier value from the input field and use it as value for animation-timing-function or transition-timing-function

Example of cubic-bezier() function is CSS

Here is how you can use cubic-bezier in your CSS code. There are 2 examples below (for animation and transition-based animations):

/* Full form for transition based animations */
.transition-element {
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.25, 0.75, 0.75, 0.25);
}

/* Short form  */
.transition-element-short {
    transition: all 1s cubic-bezier(0.25, 0.75, 0.75, 0.25);
}

/* Full form for animation based animations */
.animation-element {
    animation-name: example;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.25, 0.75, 0.75, 0.25);
}

/* Short form */
.animation-element-short {
    animation: example 1s cubic-bezier(0.25, 0.75, 0.75, 0.25);
}