Animations - ArchCSS

Named animations

Apply a ready-made keyframe animation with .animate-{name}. The classes below set the animation name, duration, timing function, and iteration count from the framework defaults.

Preview

fadeIn

<!-- Named animation -->
<span class="animate-spin">Spinner</span>

<!-- Duration and delay -->
<span class="animate-pulse animated-fast animate-delay-500">Pulse</span>

<!-- Iterations and direction -->
<span class="animate-bounce animated-x3">Bounce three times</span>

<!-- Reuse a keyframe with custom CSS -->
<span style="animation: glow 2s linear infinite alternate;">Glow</span>

Available animations

Class	Keyframe	Duration	Timing	Iterations
`.animate-spin`	`spin`	1s	linear	infinite
`.animate-bounce`	`bounce`	1s	ease-out	infinite
`.animate-pulse`	`pulse`	2s	ease-in-out	infinite
`.animate-ping`	`ping`	1s	ease-in-out	infinite
`.animate-glow`	`glow`	1s	linear	infinite
`.animate-fadeIn`	`fadeIn`	1s	ease-in	1
`.animate-fadeOut`	`fadeOut`	1s	ease-out	1
`.animate-slideIn-{dir}`	`slideIn-{dir}`	1s	ease-in	1
`.animate-slideOut-{dir}`	`slideOut-{dir}`	1s	ease-out	1
`.animate-zoomIn`	`zoomIn`	1s	ease-in	1
`.animate-zoomOut`	`zoomOut`	1s	ease-out	1

{dir} is one of left, right, top, or bottom.

Duration

Override the animation duration inherited from the named animation.

Class	Duration
`.animated-slow`	5s
`.animated-slower`	10s
`.animated-fast`	0.5s
`.animated-faster`	0.1s
`.animated-{ms}`	`{ms}` milliseconds: 100 to 5000 in steps

The millisecond scale covers 100, 200, 300, 400, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, and 5000.

Iterations

Control how many times the animation runs.

Class	Effect
`.animated-infinite`	Runs forever
`.animated-x{n}`	Runs `n` times: `.animated-x1` through `.animated-x6`

Direction

Flip the playback direction.

Class	Effect
`.animated-alt`	Alternates forward and backward
`.animated-revert`	Plays in reverse

Delay

Start the animation after a pause.

Class	Effect
`.animate-delay-{ms}`	Waits `{ms}` milliseconds before starting: 100 to 5000 in steps

Same step scale as duration: 100, 200, 300, 400, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, and 5000.

Custom keyframes. The animation library registers more keyframes than this page documents with utilities - slide-{dir}, axis rotations rotateX/Y/Z-{45,90,180,360} - so you can reuse them in your own animation: shorthand.

Reduced motion. Prefer infinite-looping animations for decorative elements only, and consider honoring a prefers-reduced-motion media query in production apps.