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.

What is the CSS Animation Properties Reference?

Searchable CSS animation property reference covering animation-name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state, scroll timelines and @keyframes with values and defaults. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Animation Properties Reference

Name: CSS Animation Properties Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

Property quick reference

Property	Initial value	What it controls
`animation-name`	`none`	Which `@keyframes` rule to run
`animation-duration`	`0s`	How long one cycle takes
`animation-timing-function`	`ease`	The easing curve between keyframes
`animation-delay`	`0s`	Pause before starting (negative = seek in)
`animation-iteration-count`	`1`	Cycles; use `infinite` to loop
`animation-direction`	`normal`	`reverse`, `alternate`, `alternate-reverse`
`animation-fill-mode`	`none`	Styles before/after the active window
`animation-play-state`	`running`	Toggle pause without removing the rule
`animation-timeline`	`auto`	Scroll or view timeline for scroll-driven
`animation-range`	`normal`	The scroll span for scroll-driven effects

Fill-mode in detail

animation-fill-mode is the property most often misunderstood:

none — the element reverts to its non-animated styles outside the animation window. An element that fades in will snap invisible during any delay and pop back to its original state once it finishes.
forwards — the final keyframe’s styles persist after the animation ends. Use this when an element should stay in its end position.
backwards — the first keyframe’s styles apply during the delay period, preventing a flash of the unanimated state before the animation begins.
both — combines forwards and backwards. This is the most useful value for entrance animations: the element is invisible during the pre-start delay, and it holds its final state once the animation finishes.

Negative delays

A negative animation-delay is a genuine technique, not a mistake. Setting animation-delay: -300ms on a 1s animation begins playback at the 300ms mark, as if it had already been running. This is useful for staggered list animations where items further down the list should appear to start their animation later without actually waiting.

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.