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

Next lesson: Transition-delay

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies