# Transition-Timing Function: Cubic-Bezier in CSS

The CSS transition-timing function is a feature that helps you transition from one thing to another. A CSS transition timing function property specifies how intermediary values for CSS attributes impacted by a transition effect are computed. In general, this allows you to create an acceleration gradient so that the transition’s pace can change over time.

One for each attribute to be transitioned is used to construct this acceleration graph. Several easing algorithms can be supplied; each one will be used to the corresponding parameter as defined by the CSS transition timing function parameter, which operates as a transition-property collection.

If there are fewer easing functions supplied than those in the transition-property range, the user representative must quantify which valuation is used by iterating over the set of attributes until each transition property has a value.

## Possible Values

• <easing-function>

Each easing function specifies the easing parameter that should be used to link to the transition-corresponding property’s attribute.

The non-step phrase values depict cubic Bézier curves with set four-point numbers, while the cubic-bezier CSS() function result allows for a non-predefined number. The step timing algorithms divide the given time into a predetermined number of equal-length intervals. A number of stages, as well as a step position, characterize it.

1. ease

The possible values, cubic-bezier(0.25, 0.1, 0.25, 1.0), accelerate near the center of the transition before calming down towards the conclusion.

1. linear

Transitions with the same speed as cubic-bezier(0.0, 0.0, 1.0, 1.0).

1. ease-in

Ease-in, which is equivalent to cubic-bezier css(0.42, 0, 1.0, 1.0), begins softly and gradually accelerates until the transformation is accomplished.

1. ease-out

Equivalent to cubic-bezier(0, 0, 0.58, 1.0), transitions swiftly at first, then gradually slows down.

1. ease-in-out

Identical to cubic-bezier(0.42, 0, 0.58, 1.0), transitions slowly at first, then quickly, then steadily again.

1. bezier-cubic (p1, p2, p3, p4)

A cubic bezier graph was created by the author, with p1 and p3 variables in the area of 0 to 1.

• Steps( n, <jumpterm>)

Reveals the transition across n pauses all during the transition, with each stop being displayed for the same amount of time. If n is 5, for instance, there are 5 stages. Which of the preceding jump words is utilized determines if the transition makes 5 pauses between 0 percent and 100 percent throughout the transition or performs 5 pauses such as the 0 percent and 100 percent marks:

1. jump-start

Signifies a left-continuous expression, with the first jump occurring at the start of the transition.

1. jump-end

Signifies a right continuous expression, with the last jump occurring at the end of the animations.

1. jump-none

Along either end, there really is no drop. Instead, keep both the 0 percent and 100 percent marks for 1/n of the time.

1. jump-both

Inserts stop at the 0% & 100% marks, thus extending a step to the transitions.

1. Start

It’s the same as jump-starting a car.

1. End

Identical to jump-end.

1. step-start

Moves are equivalent to (1, jump-start)

1. step-end

Moves are equivalent to (1, jump-end)