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

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>
Syntax
animation-duration

Setting the length of time that an animation takes to complete one cycle.

Syntax
animation-iteration-count

Setting the number of times an animation should be played.

© Aoyue Design LLC.