What is the difference between fill-mode forwards and both?

forwards keeps the styles of the last keyframe after the animation ends. backwards applies the first keyframe's styles during the delay before it starts. both does both at once, so the element looks animated from the moment it is rendered through after it finishes.

How do the two times work in the animation shorthand?

In the shorthand, the first time value is read as animation-duration and the second as animation-delay. Other longhands can appear in any order, but if you supply two times their position decides which is duration and which is delay.

What does animation-iteration-count: infinite do?

It repeats the animation endlessly until the element is removed or play-state is set to paused. You can also use fractional counts such as 1.5 to stop partway through a cycle, which combines well with alternate direction.

How do steps() timing functions behave?

steps(n) divides the animation into n equal jumps instead of smooth interpolation, useful for sprite sheets and typewriter effects. The optional second argument (jump-start, jump-end, jump-both, jump-none) controls whether the jump happens at the start or end of each interval.

Can CSS animations be driven by scroll?

Yes. animation-timeline can reference a scroll() or view() timeline so progress is tied to scroll position rather than elapsed time, and animation-range restricts the scroll span. These scroll-driven animations are newer and need fallbacks for unsupported browsers.

CSS Animation Properties Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Driving motion with @keyframes

CSS animations interpolate an element between waypoints defined in a @keyframes rule, controlled by the animation-* family of properties. This reference lists each longhand, the animation shorthand and @keyframes itself, with accepted values, initial values and the behaviour worth remembering.

How it works

You define waypoints in @keyframes name { from { … } to { … } } or with percentage stops, then attach them with animation-name and a non-zero animation-duration. The remaining longhands shape playback: timing-function sets the easing between keyframes, iteration-count and direction control repetition and bounce, delay offsets the start (negative delays seek into the animation), and fill-mode decides whether the start or end keyframe persists outside the active window.

The animation shorthand packs these together; its only strict rule is that the first <time> is the duration and the second is the delay. Newer properties animation-timeline and animation-range replace the clock with scroll progress for scroll-driven effects. Filter the list above to find any property fast.

Tips and accessibility

Always provide both a name and a non-zero duration; with duration: 0s nothing visibly animates.
Use fill-mode: forwards when an element should stay in its final state instead of snapping back to its unanimated styles.
Wrap motion in @media (prefers-reduced-motion: reduce) and tone it down or remove it, so users who are sensitive to motion are respected.
!important declarations inside @keyframes are ignored by spec, so do not rely on them to win specificity battles.