@keyframes and animation

An animation has two parts. The keyframes (@keyframes) have a name and describe states over time: from equals 0% and to equals 100%, and you can add any percentages in between. If 0% or 100% is missing, the browser uses the value the element already has.

1@keyframes beat {
2  0%, 100% { transform: scale(1); opacity: 1; }
3  50%      { transform: scale(1.4); opacity: 0.6; }
4}

The other part is the animation property, which plays those keyframes on an element. It bundles eight properties:

1. Nameanimation-nameThe name of the keyframes.
2. Durationanimation-durationHow long one cycle lasts.
3. Curveanimation-timing-functionIt applies to each stretch between two keyframes, not to the whole animation.
4. Delayanimation-delayHow long it waits before starting.
5. Iterationsanimation-iteration-countHow many times it repeats; infinite never stops.
6. Directionanimation-directionnormal goes from 0% to 100%; alternate goes there and back.
7. Fillanimation-fill-modeWhat shows outside the animation. With none the element returns to its own style, forwards keeps the last keyframe, backwards applies the first one during the delay, and both does both.
8. Stateanimation-play-staterunning or paused.

Move the controls, use Pause and Replay, and watch the shorthand change. The ruler underneath follows the progress through the @keyframes: its mark runs from 0% to 100% on the same curve, delay, iterations and direction as the record.

animation-play-state: running

slide 1s ease-in-out infinite alternate

PauseReplay

-80px80px

0%50%100%progress

@keyframes

slidebeatturn

duration1000ms

delay0ms

iteration-count

13infinite

direction

normalalternate

disc.css

@keyframes slide {
  from { transform: translateX(-80px); }
  to   { transform: translateX(80px); }
}

.disc {
  animation: slide 1s ease-in-out infinite alternate;
}

disc.html

<!-- the @keyframes live in your CSS, as in disc.css -->
<img src="disc.png" alt="" class="animate-[slide_1s_ease-in-out_infinite_alternate] motion-reduce:animate-none" />

The shorthand is usually written in this order: name, duration, curve, delay, iteration count, direction, fill mode and play state. What the browser requires is that the first time is the duration and the second one is the delay.

Transition or animation

Use a transition when something goes from one state to another for a reason: hover, focus, a new class. Use an animation when the motion has to start on its own, have more than two steps or repeat, like a loading indicator.

1.button { transition: transform 200ms ease; }
2.button:hover { transform: scale(1.05); }
3
4.loading { animation: turn 1s linear infinite; }

Either way, the cheapest properties to animate are transform and opacity: the browser can handle them while compositing the page, without recalculating layout or repainting. Animating width, top or left recalculates layout on every frame, and on a phone it shows.

The steps(4) curve swaps continuous motion for four jumps in each stretch. It's how you animate frame by frame, like a sprite. With turn and steps(4), the record goes through 0, 90, 180 and 270 degrees, then starts over.

turn · steps(4)four jumps per turn

0deg

90deg

180deg

270deg

Accessible motion

For some people, motion on screen causes dizziness or nausea, for example with vestibular disorders. Operating systems have a setting to reduce it, and CSS reads it with the prefers-reduced-motion media query.

When it's reduce, remove the motion or replace it with something still. Shortening the duration isn't enough: a shorter infinite loop spins faster, which is worse. That's why the demo starts paused if your system asks for it.

1@media (prefers-reduced-motion: reduce) {
2  .disc { animation: none; }
3}

1. FlashesWCAG 2.3.1 · level ANothing may flash more than three times in any one second, unless the flash stays below the size and contrast thresholds.
2. PauseWCAG 2.2.2 · level AIf something moves on its own, lasts more than five seconds and is shown alongside other content, there must be a way to pause, stop or hide it. An infinite animation falls under this rule.

The demo's Pause button meets that rule: it's a button with aria-pressed that changes animation-play-state.

In Tailwind

Tailwind ships four ready-made animations: animate-spin, animate-ping, animate-pulse and animate-bounce. For your own, the @keyframes stay in CSS and the animation goes in brackets, with underscores instead of spaces. If you'll reuse it, define it in @theme: --animate-slide creates the animate-slide class.

1<!-- in your CSS:
2@theme {
3  --animate-slide: slide 1s ease-in-out infinite alternate;
4  @keyframes slide {
5    from { transform: translateX(-80px); }
6    to { transform: translateX(80px); }
7  }
8}
9-->
10<div class="animate-slide motion-reduce:animate-none">…</div>
11
12<!-- only spins when the system doesn't ask for less motion -->
13<div class="motion-safe:animate-spin">…</div>