Timing function
Learn the transition curve with transition-timing-function.
transition-timing-function
transition-timing-function sets the speed curve of the transition. You choose whether the change between two values runs at constant speed, starts slow and ends fast, or starts fast and ends slow.
Three common values: ease (the default; fast at first, slow at the end), linear (a flat line, constant speed) and ease-in-out (slow at both ends, fast in the middle).
The character of each curve
The three curves have different character. ease starts fast and slows at the end; the motion feels like it settles naturally. linear keeps a constant speed; robotic but flat.
ease-in-out is slow at both ends and fast in the middle; the most balanced choice. Buttons and cards usually pick this value because it sets a steady feel.
A pill-shaped label
A pill-shaped .pill label should change color on hover. With ease-in-out you get a transition that is slow at the ends and fast in the middle; the motion feels neither harsh nor dull.
Interface components usually favor ease and ease-in-out. linear is reserved for things like progress bars that need constant speed.
Exercise Add a timing curve to the pill label
Add transition-timing-function: ease-in-out to the .pill rule. Then set background-color: teal for .pill:hover. On hover the color should flow with a balanced curve.
Show example solution
.pill {
background-color: #e5e7eb;
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
.pill:hover {
background-color: teal;
}Test yourself
-
Which value gives a flat, constant-speed transition?
.bar { transition-timing-function: linear; }- ease
- linear
- ease-in-out
Show answer
linear — Correct. linear draws a flat curve with constant speed throughout.
-
Pick the balanced curve
.pill { transition-property: background-color; transition-duration: 0.3s; transition-timing-function: ____; }Show answer
.pill { transition-property: background-color; transition-duration: 0.3s; transition-timing-function: ease-in-out; } -
Match each curve to its character
- ease
- Fast at start, slow at end
- linear
- Constant speed, flat line
- ease-in-out
- Slow at both ends, fast in middle