Animation timing function
Learn the animation curve with animation-timing-function.
What is animation-timing-function?
animation-timing-function sets the speed curve of an animation. Within the same duration it can make the motion start slow, move fast in the middle, and ease out at the end. The default is ease.
Common values: linear (steady speed), ease-in (slow start), ease-out (slow end), ease-in-out (slow at both ends). Pick by motion type: a spinning loader wants linear, an opening menu wants ease-out.
Custom curves with cubic-bezier
When the preset values are not enough, cubic-bezier() lets you draw your own curve. It takes four numbers: cubic-bezier(0.4, 0, 0.2, 1). The first pair shapes the start of the curve, the second pair shapes the end.
The curve stays between 0 and 1. (0, 0, 1, 1) equals linear. These four numbers give the motion its personality; small tweaks make a big difference.
Exercise Add a curve to the bell and loader
The .loader spins continuously and wants steady speed: animation-timing-function: linear. The .bell swings once and the motion should ease out at the end: ease-out. Add an animation-timing-function declaration to both elements.
Show example solution
/* spinning loader */
.loader {
animation-name: spin;
animation-duration: 1s;
animation-timing-function: linear;
}
/* swinging bell */
.bell {
animation-name: swing;
animation-duration: 0.6s;
animation-timing-function: ease-out;
}Test yourself
-
Which value best fits a continuously spinning loader?
.loader { animation-name: spin; animation-duration: 1s; animation-timing-function: ???; }- linear
- ease-in
- ease-out
- ease-in-out
Show answer
linear — Correct. linear gives steady speed; the spin feels even.
-
Complete the cubic-bezier call
.notice { animation-timing-function: cubic-bezier(____); }Show answer
.notice { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } -
Match each timing function to its behavior
- linear
- Steady speed
- ease-in
- Slow start
- ease-out
- Slow end
- ease-in-out
- Slow at both ends
-
What does cubic-bezier(0, 0, 1, 1) equal?
.notice { animation-timing-function: cubic-bezier(0, 0, 1, 1); }- ease-in
- ease-out
- linear
- ease-in-out
Show answer
linear — Correct. This is a straight line; it gives steady speed.