Animation duration

A loading animation needs a pace. The CSS `animation-duration` property sets how long one run through its keyframes takes, from start to finish. Write the time in seconds (`s`) or milliseconds (`ms`). A longer duration makes the same animation complete more slowly. section 3.4.2

Imagine a loader made of rectangles that shrink halfway through an animation and return to full height at the end. Give the rectangles an `animation-name` that matches the keyframes, then set `animation-duration: 2.2s` to make each complete cycle take 2.2 seconds. section 3.4.1 section 3.4.2

rect {
  animation-name: doScale;
  animation-duration: 2.2s;
}

The rectangle rule places `animation-duration` beside `animation-name`: the name selects the keyframes, and the duration sets the time for one run. section 3.4.2

Duration does not make the loader repeat. With only a name and duration set, the rectangles animate once and stop. Use `animation-iteration-count` to control repetition and `animation-delay` to stagger when individual rectangles start. Duration, name, and iteration count can also be written together in the `animation` shorthand. section 3.4.2 section 3.4 section 3.4.4

Choose the time by watching the result. A quick change of state might take around 250 milliseconds; a larger panel change might take around 500 milliseconds. A loader calls for trial and error because people may watch it longer. Avoid motion that feels imperceptibly fast or laggy, and consider people sensitive to motion. For flashing animations, keep the flash rate at no more than three times per second. section 3.4.2