CSS: animation-timing-function

The animation-timing-function property controls how quickly an animation progresses between keyframes.

Basic example

.notice {
  animation: appear 400ms ease-out;
}

.spinner {
  animation: spin 1s linear infinite;
}

linear keeps a constant pace. ease starts and ends more gently. A timing function changes the pace, not the total duration.

Common mistakes

• Do not make important feedback so slow that the state is unclear.
• Use a constant pace for a rotating indicator when that communicates ongoing work.
• Keep motion short and test a reduced-motion alternative.