Easing Function

The easing function data type denotes a mathematical function that describes the rate at which a numerical value changes.

Types of Easing Functions

Linear

linear

The interpolation is done at a constant rate from beginning to end.

Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).

Cubic Bézier Curves

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

Defines a cubic Bézier curve defined by:

• $P_0(0, 0)$ — the starting position
• $P_1(x_1, y_1)$
• $P_2(x_2, y_2)$
• $P_3(1, 1)$ — the final position

ease

Starts slowly, accelerates sharply, and then slows down towards the end. (Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).)

ease-in

Starts slowly, and accelerates towards the end. (Equivalent to cubic-bezier(0.42, 0.0, 1.0, 1.0).)

ease-in-out

Starts slowly, speeds up, and then slows down towards the end (Equivalent to cubic-bezier(0.42, 0.0, 0.58, 1.0).)

ease-out

Starts abruptly, and then slows down towards the end. (Equivalent to cubic-bezier(0.0, 0.0, 0.58, 1.0).)

Step Functions

steps(n, jump)

Defines a step function with n step(s) and which segment to jump:

• jump-start or start — skip the start segment
• jump-end or end — skip the final segment
• jump-none — include the start and final segments
• jump-both — skip both the start and final segments

step-start

Skip the start segment (jumps directly to its final position).

step-end

Skip the final segment (stays at its initial position).

Assets

• linear (MDN) — Appeared in https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function — https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier-linear.png
• Cubic Bézier (MDN) — Appeared in https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function — https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier-example.png
• ease (MDN) — Appeared in https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function — https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier-ease.png
• ease-in (MDN) — Appeared in https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function — https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier-ease-in.png
• ease-in-out (MDN) — Appeared in https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function — https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier-ease-in-out.png
• ease-out (MDN) — Appeared in https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function — https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier-ease-out.png
• step-start (MDN) — Appeared in https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function — https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps-1-start.png
• step-end (MDN) — Appeared in https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function — https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps-1-end.png

References

• <easing-function> (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function