Iteration count
The repeat dial for an animation: once, a fixed number of loops, part of a loop, or forever.
See it
What it is
Iteration count says how many times a CSS animation runs. Set 'animation-iteration-count: 3' for three complete passes or 'infinite' for a loop that never reaches an after state. The default is one, so an animation without the property plays once and stops.
Use a small count for a finite attention cue, such as a button pulsing twice after an error, and 'infinite' only for motion whose meaning truly continues, such as a loading spinner. Fractional counts are valid too: '2.5' runs two full cycles and stops halfway through the third.
Gotcha: an infinite animation never finishes, so 'animation-fill-mode: forwards' has no final state to preserve. It also keeps doing work until you pause or remove it. Stop decorative loops when they are off-screen and disable them when 'prefers-reduced-motion: reduce' matches.
Ask AI for it
Make this error badge pulse exactly twice with CSS 'animation-iteration-count: 2'. Define a 600ms @keyframes pulse that starts and ends at 'transform: scale(1)' and reaches 'transform: scale(1.06)' at 50%, use 'ease-in-out', and leave 'animation-fill-mode' as 'none' so the badge returns to its underlying style. Under 'prefers-reduced-motion: reduce', remove the animation and show the error state without motion.