Syntax

Animation Fill Mode

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
`@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 @slide-to-right|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 based on different states using selectors and applying conditionally.

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