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.

Overview [sr-only]

ClassDeclarations
animation-fill-mode:mode, / @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 @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>
PREVIOUS
Animation Duration

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

NEXT
Animation Iteration Count

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

MIT License © Aoyue Design LLC.