animation

CSS animation property classes. Supports individual property classes and animation shorthand using the an prefix.

Animation Shorthand

Combines an + name + duration + timing + delay + iteration count + fill-mode for the animation shorthand. Timing also accepts compact forms — easein becomes ease-in.

an{name}-{duration}-{timing}-{delay}-{iteration}-{fillMode}

Part	Role	Example
`an`	animation prefix (required)	an
`{name}`	keyframe name (required)	fadeIn, slideUp, pulse
`{duration}`	duration (required)	1s, 500ms, 1-5s
`{timing}`	timing function (optional) — compact form allowed: easein → ease-in	ease, linear, ease-in-out, easein
`{delay}`	delay (optional)	1s, 500ms
`{iteration}`	iteration count (optional)	infinite, 3
`{fillMode}`	fill-mode (optional)	forwards, backwards, both

anfadeIn-1s-ease = an(animation) + fadeIn(name) + 1s(duration) + ease(timing)

Usage Examples

Class	CSS
`anfadeIn-1s-ease`	animation: fadeIn 1s ease
`anfadeIn-500ms-linear`	animation: fadeIn 500ms linear
`anslideUp-1s-ease-in-out`	animation: slideUp 1s ease-in-out
`anslideDown-300ms`	animation: slideDown 300ms
`anfadeIn-1s-ease-infinite`	animation: fadeIn 1s ease infinite
`anpulse-2s-ease-in-out-infinite`	animation: pulse 2s ease-in-out infinite
`anbounce-1s-ease-3`	animation: bounce 1s ease 3
`anslideUp-1s-easein`	animation: slideUp 1s ease-in
`anfadeIn-2s-ease-1s`	animation: fadeIn 2s ease 1s
`anspinCW-2s-linear-infinite`	animation: spinCW 2s linear infinite
`anfadeIn-1s-ease-in-out-infinite-forwards`	animation: fadeIn 1s ease-in-out infinite forwards

Preset Keyframes

Using names below auto-inserts @keyframes rules into CSS. Custom names require manually writing @keyframes.

Name	Effect	Usage Examples
`fadeIn`	Transparent → opaque	`anfadeIn-1s-ease`
`fadeOut`	Opaque → transparent	`anfadeOut-500ms-ease`
`slideUp`	Slide up from bottom	`anslideUp-1s-ease-in-out`
`slideDown`	Slide down from top	`anslideDown-300ms`
`slideLeft`	Slide left from right	`anslideLeft-500ms-ease`
`slideRight`	Slide right from left	`anslideRight-500ms-ease`
`zoomIn`	Scale up and appear	`anzoomIn-500ms-ease`
`zoomOut`	Scale down and disappear	`anzoomOut-500ms-ease`
`spinCW`	Clockwise rotation	`anspinCW-2s-linear-infinite`
`spinCCW`	Counter-clockwise rotation	`anspinCCW-2s-linear-infinite`
`bounce`	Bounce effect	`anbounce-1s-ease`
`pulse`	Pulse scale up/down	`anpulse-2s-ease-in-out-infinite`
`shake`	Horizontal shake	`anshake-500ms-ease`
`flip`	Y-axis rotation (card flip)	`anflip-1s-ease`
`swing`	Shake and settle	`answing-1s-ease`
`rubberBand`	Rubber band stretch and return	`anrubberBand-1s-ease`
`blink`	Blink	`anblink-1s-ease-infinite`

Code Examples

<!-- Fade in -->
<div class="anfadeIn-1s-ease">Appearing element</div>

<!-- Infinite rotation loading -->
<div class="anspinCW-2s-linear-infinite w4rem h4rem">
  <svg>...</svg>
</div>

<!-- Bounce notification badge -->
<span class="anbounce-1s-ease bg6366F1 cFFFFFF br50p w2-4rem h2-4rem df jcc aic">3</span>

<!-- Shake on hover -->
<button class="hover-anshake-500ms-ease bg18181B cFFFFFF py12px px2-4rem br8px">
  Hover me
</button>

<!-- Card entrance (slide up + fill forwards) -->
<div class="anslideUp-500ms-ease-in-out-infinite-forwards bg0F0F17 p2rem br8px">
  Card Content
</div>

Custom Keyframe Usage

Non-preset names can be used freely. E.g.: anmyCustom-1s-ease. The @keyframes rule must be written in a separate CSS file.

Play State

Class	CSS
`apsr`	animation-play-state: running
`apsp`	animation-play-state: paused

Fill Mode

Class	CSS
`afmn`	animation-fill-mode: none
`afmf`	animation-fill-mode: forwards
`afmb`	animation-fill-mode: backwards
`afmbf`	animation-fill-mode: both

Direction

Class	CSS
`adin`	animation-direction: normal
`adir`	animation-direction: reverse
`adial`	animation-direction: alternate
`adialr`	animation-direction: alternate-reverse

Iteration Count

Class	CSS
`aicinf`	animation-iteration-count: infinite

Tips & Notes

Shorthand vs Individual Properties

Specify all at once with anfadeIn-1s-ease, or combine individual properties like afmf aicinf.

Preset = automatic @keyframes

Preset names (fadeIn, slideUp, etc.) auto-insert @keyframes into CSS. Same keyframe across multiple classes generates only once.

hover + animation

Can combine with pseudo-classes like hover-anfadeIn-500ms-ease. Media queries also supported.

animation-direction animation-fill-mode animation-iteration-count animation-play-state transition gradient