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.

Overview

ClassDeclarations
@fill:mode,animation-fill-mode: mode,;
@fill:noneanimation-fill-mode: none;
@fill:forwardsanimation-fill-mode: forwards;
@fill:backwardsanimation-fill-mode: backwards;
@fill:bothanimation-fill-mode: both;
from
origin
to
<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>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.