CSS Academy · Lesson

Animation Direction Fill-Mode and Iteration

Control animation playback direction, how many times it loops, and the final state with fill-mode.

animation-iteration-count

Controls how many times the animation repeats. Use infinite for continuous looping.

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

.pulse {
  animation: pulse 2s ease-in-out 3; /* plays 3 times */
}

Controls the playback direction on alternate cycles:

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