meet it

The timing function shapes the speed, smooth or in steps.

Animations take the same speed curves as transitions, through animation-timing-function. The default, ease, starts slowly, rushes, then slows down. Anything that spins should use linear, one steady speed, so it never seems to stutter at the end of each turn.

is different. steps(4) jumps between four frames with no motion in between, like a flip book. It suits a ticking clock, a blinking cursor or a row of loading dots.

<div class="spinner"></div>

@keyframes spin {
  to { rotate: 1turn; }
}
.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #e5e7eb;
  border-top-color: #0f766e;
  border-radius: 50%;
  animation-name: spin;
  animation-duration: 1s;
  animation-timing-function: linear;
}

Press show my page to see it here.

A to stop on its own is fine: the browser starts from the box's normal style.

guess first

Four steps over two seconds. How does the cursor change?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<p>Type here<span class="cursor">|</span></p>

@keyframes blink {
  to { opacity: 0; }
}
.cursor {
  animation-name: blink;
  animation-duration: 2s;
  animation-timing-function: steps(4);
}

your turn

Your turn. Make the loader spin evenly.

Fill in a timing function so the loader spins at one steady speed, with no slowing down at the end of each turn.

the page you’re styling

<div class="loader"></div>

your css

Your code

Press show my page to see it here.

the loader spins at a steady speednot checked yet

fix it

The clock hand glides instead of ticking. Can you fix it?

the page you’re styling

<div class="hand"></div>

your css

Broken code to fix

Press show my page to see it here.

the hand ticks in 60 jumpsnot checked yet

The hand moves smoothly, so the browser skipped the timing function. Check its spelling.
The function that jumps has a plural name.
Write steps(60), then press run.

nailed it

you took control of the speed. :D

animation-timing-function shapes the speed of an animation.
Use linear for anything that spins.
steps(n) jumps between frames like a flip book.

new words in your collection

steps()

This lesson isn’t saved. A free account remembers every lesson you finish.