Animation

Animation Fill Mode

Style syntax for setting how a CSS animation applies styles to its target before and after its execution.

🚧This page is still under construction and some content may not be complete.

Class	Declarations
`animation-fill-mode:mode,…` `/` `@fill:mode,…`	`animation-fill-mode: mode, …`
`@fill:none`	`animation-fill-mode: none`
`@fill:forwards`	`animation-fill-mode: forwards`
`@fill:backwards`	`animation-fill-mode: backwards`
`@fill:both`	`animation-fill-mode: both`

from

origin

<svg class="@fill:none @example-slide|3s @delay:1s!">…</svg>

Simplify the native syntax using the derived symbol.

<div class="animation-fill-mode:both">
<div class="@fill:both">

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="@fill-mode:none:hover @fill-mode:none@sm @fill-mode:none@dark @fill-mode:none@print">…</div>

Style syntax for setting the length of time that an animation takes to complete one cycle.

Style syntax for setting the number of times an animation should be played.