CSS Academy · Lesson

Easing Functions: ease linear cubic-bezier

Control the speed curve of transitions using built-in keywords and cubic-bezier() functions.

What is an Easing Function?

An easing function controls the speed curve of a transition or animation — how fast it accelerates or decelerates over its duration.

linear maintains constant speed throughout the transition. Useful for loading bars and progress indicators where steady motion is expected.

.progress { transition: width 1s linear; }