Transitions & Animations
Pure-CSS animation library. Add wf-animate plus any wf-ani-* class to an element to play a named keyframe animation. Duration, delay, and fill mode are all controlled via CSS custom properties on the element, so every animation can be customized without touching a stylesheet. No JavaScript is required — but all animations integrate with the Trigger component via data-wf-animation-in / data-wf-animation-out .
Basic
<!-- Play once on load -->
<div class="wf-animate wf-ani-fade-in">Hello</div>
<!-- Custom duration and delay -->
<div class="wf-animate wf-ani-roll-in-left"
style="--wf-anim-duration: 1.2s; --wf-anim-delay: 0.3s">Hello</div>
<!-- Loop forever -->
<div class="wf-animate wf-infinite wf-ani-pulsate">Hello</div>CSS Properties
Set these on the animated element (or any ancestor) to control timing without writing a custom keyframe rule.
| Property | Default | Description |
|---|---|---|
| --wf-anim-duration | 0.8s | Animation duration. Overrides the per-animation default. Some animations define their own default (e.g., roll-in uses 0.9s). Always wins when set inline. |
| --wf-anim-delay | 0s | Animation start delay. Useful for staggering multiple elements. |
| --wf-anim-fill | both | Animation fill mode. both means the element holds its end-state after the animation completes and respects the delay at the start. |
Utility Classes
wf-animate is the required base class — it sets animation-fill-mode , animation-duration , and animation-delay from the CSS custom properties. Without it an animation class has no effect. Add wf-infinite to make any animation repeat forever — most useful for attention animations.
wf-ani-pulsate
wf-ani-pop-in
<!-- Required: wf-animate + animation class -->
<div class="wf-animate wf-ani-pop-in">Plays once</div>
<!-- Add wf-infinite to loop -->
<div class="wf-animate wf-infinite wf-ani-pulsate">Loops forever</div>
<!-- Staggered list items -->
<ul>
<li class="wf-animate wf-ani-fade-in-bottom" style="--wf-anim-delay: 0s">First</li>
<li class="wf-animate wf-ani-fade-in-bottom" style="--wf-anim-delay: 0.1s">Second</li>
<li class="wf-animate wf-ani-fade-in-bottom" style="--wf-anim-delay: 0.2s">Third</li>
</ul>Fade
Opacity-only entrance and exit animations. The directional variants add a translate in addition to the fade.
Entrance
Exit
<div class="wf-animate wf-ani-fade-in">…</div>
<div class="wf-animate wf-ani-fade-in-right">…</div>
<div class="wf-animate wf-ani-fade-in-left">…</div>
<div class="wf-animate wf-ani-fade-in-top">…</div>
<div class="wf-animate wf-ani-fade-in-bottom">…</div>
<div class="wf-animate wf-ani-fade-out">…</div>
<div class="wf-animate wf-ani-fade-out-left">…</div>
<div class="wf-animate wf-ani-fade-out-right">…</div>
<div class="wf-animate wf-ani-fade-out-top">…</div>
<div class="wf-animate wf-ani-fade-out-bottom">…</div>Slide
Translate by 100% with no opacity change. The parent container should have overflow:hidden to prevent layout shift during the animation.
Entrance
Exit
<!-- Wrap in overflow:hidden to prevent layout shift -->
<div class="wf-overflow-hidden">
<div class="wf-animate wf-ani-slide-in-down">…</div>
</div>
<!-- All slide variants -->
wf-ani-slide-in-down / wf-ani-slide-out-down
wf-ani-slide-in-up / wf-ani-slide-out-up
wf-ani-slide-in-left / wf-ani-slide-out-left
wf-ani-slide-in-right / wf-ani-slide-out-rightDrive
Slide with an overshoot bounce: entrance slides past and springs back; exit winds back before exiting. Adds kinetic energy to slide transitions.
Entrance
Exit
wf-ani-drive-in-left / wf-ani-drive-out-left
wf-ani-drive-in-right / wf-ani-drive-out-right
wf-ani-drive-in-top / wf-ani-drive-out-top
wf-ani-drive-in-bottom / wf-ani-drive-out-bottomSwoop
Combines a directional translate with a scale stretch, giving a slingshot feel on entry and a squash effect on exit.
Entrance
Exit
wf-ani-swoop-in-left / wf-ani-swoop-out-left
wf-ani-swoop-in-right / wf-ani-swoop-out-right
wf-ani-swoop-in-top / wf-ani-swoop-out-top
wf-ani-swoop-in-bottom / wf-ani-swoop-out-bottomRoll
Combines a large translate (±400 px) with a 445° rotation, making the element appear to roll into or out of view like a wheel.
Entrance
Exit
wf-ani-roll-in-left / wf-ani-roll-out-left
wf-ani-roll-in-right / wf-ani-roll-out-right
wf-ani-roll-in-top / wf-ani-roll-out-top
wf-ani-roll-in-bottom / wf-ani-roll-out-bottomPop
Scale-based entrances and exits with an elastic overshoot. The directional variants also translate from the given edge before popping into place.
Entrance
Exit
wf-ani-pop-in / wf-ani-pop-out
wf-ani-pop-in-left / wf-ani-pop-out-left
wf-ani-pop-in-right / wf-ani-pop-out-right
wf-ani-pop-in-top / wf-ani-pop-out-top
wf-ani-pop-in-bottom / wf-ani-pop-out-bottomSpin & Flip
wf-ani-spin rotates 360° with a pre-windup. wf-ani-spin-in / wf-ani-spin-out combine the rotation with a scale entrance/exit. The flip variants use CSS perspective() for a true 3D card-flip. The jump variants add a rotation (±90°) with a scale bounce, launching from the given side.
Spin
Jump
Flip
<!-- Spin -->
wf-ani-spin / wf-ani-spin-in / wf-ani-spin-out
<!-- Flip (3D) -->
wf-ani-flip / wf-ani-flip-in-x / wf-ani-flip-in-y / wf-ani-flip-out-x / wf-ani-flip-out-y
<!-- Jump -->
wf-ani-jump-in-left / wf-ani-jump-in-right / wf-ani-jump-out-left / wf-ani-jump-out-rightScale, Fold & Pull
scale-in / scale-out are simple opacity + scale animations — useful as lightweight alternatives to pop. unfold / fold animate both axes independently, mimicking an unfolding piece of paper. The pull variants scale from a single-edge origin.
Scale
Fold
Pull
<!-- Scale -->
wf-ani-scale-in / wf-ani-scale-out
<!-- Fold -->
wf-ani-unfold / wf-ani-fold
<!-- Pull (scale from edge) -->
wf-ani-pull-up / wf-ani-pull-down / wf-ani-pull-left / wf-ani-pull-rightAttention
Designed for looping. Pair these with wf-infinite to draw the user’s attention to an element. wf-ani-bounce requires three <span> children — the animation targets them via the > span selector with staggered delays.
<!-- Standard attention animations (loop with wf-infinite) -->
<div class="wf-animate wf-infinite wf-ani-pulsate">…</div>
<div class="wf-animate wf-infinite wf-ani-blink">…</div>
<div class="wf-animate wf-infinite wf-ani-shake">…</div>
<div class="wf-animate wf-infinite wf-ani-hit-left">…</div>
<div class="wf-animate wf-infinite wf-ani-hit-right">…</div>
<div class="wf-animate wf-infinite wf-ani-ball">…</div>
<div class="wf-animate wf-infinite wf-ani-spin">…</div>
<!-- Bounce — requires 3 span children -->
<div class="wf-animate wf-ani-bounce">
<span></span>
<span></span>
<span></span>
</div>Class Reference
| Class | Description |
|---|---|
| Utility | |
| wf-animate | Required base class. Applies fill mode, duration, and delay from CSS custom properties. Must be present for any animation to work. |
| wf-infinite | Sets animation-iteration-count: infinite . Add alongside wf-animate to loop forever. |
| Fade | |
| wf-ani-fade-in | Fade from transparent to opaque. |
| wf-ani-fade-in-right | Fade in while sliding from the right (400 px). |
| wf-ani-fade-in-left | Fade in while sliding from the left. |
| wf-ani-fade-in-top | Fade in while sliding down from above. |
| wf-ani-fade-in-bottom | Fade in while sliding up from below. |
| wf-ani-fade-out | Fade from opaque to transparent. |
| wf-ani-fade-out-left | Fade out while sliding to the left. |
| wf-ani-fade-out-right | Fade out while sliding to the right. |
| wf-ani-fade-out-top | Fade out while sliding upward. |
| wf-ani-fade-out-bottom | Fade out while sliding downward. |
| Slide | |
| wf-ani-slide-in-down | Slide in from above (100% of element height). |
| wf-ani-slide-in-up | Slide in from below. |
| wf-ani-slide-in-left | Slide in from the left (100% width). |
| wf-ani-slide-in-right | Slide in from the right. |
| wf-ani-slide-out-down | Slide out downward. |
| wf-ani-slide-out-up | Slide out upward. |
| wf-ani-slide-out-left | Slide out to the left. |
| wf-ani-slide-out-right | Slide out to the right. |
| Drive | |
| wf-ani-drive-in-left/right/top/bottom | Slide in from the given direction with an overshoot bounce. Duration default: 1s. |
| wf-ani-drive-out-left/right/top/bottom | Wind back then exit to the given direction. Duration default: 1s. |
| Swoop | |
| wf-ani-swoop-in-left/right/top/bottom | Slide in with a horizontal/vertical scale stretch. Duration default: 0.5s. |
| wf-ani-swoop-out-left/right/top/bottom | Squash and exit to the given direction. |
| Roll | |
| wf-ani-roll-in-left/right/top/bottom | Translate from the given direction while rotating 445°. Duration default: 0.9s. |
| wf-ani-roll-out-left/right/top/bottom | Rotate and exit to the given direction. |
| Pop | |
| wf-ani-pop-in | Scale from 0 with elastic overshoot. Duration default: 1s. |
| wf-ani-pop-in-left/right/top/bottom | Translate from the given edge, then pop into place. |
| wf-ani-pop-out | A brief scale-up then shrinks to 0. Duration default: 0.5s. |
| wf-ani-pop-out-left/right/top/bottom | Scale up briefly, then shrink and exit to the given direction. |
| Spin & Flip | |
| wf-ani-spin | 360° rotation with a pre-windup. Duration default: 1.2s. |
| wf-ani-spin-in | Spin in from 0 scale while rotating 360°. Duration default: 1s. |
| wf-ani-spin-out | Spin out to 0 scale. |
| wf-ani-flip | Full 360° Y-axis 3D flip with a mid-point scale. |
| wf-ani-flip-in-x | 3D flip entrance rotating on the X axis. Duration default: 1s. |
| wf-ani-flip-in-y | 3D flip entrance rotating on the Y axis. |
| wf-ani-flip-out-x | 3D flip exit rotating on the X axis. |
| wf-ani-flip-out-y | 3D flip exit rotating on the Y axis. |
| wf-ani-jump-in-left/right | Rotate ±90° from small scale with elastic overshoot. |
| wf-ani-jump-out-left/right | Rotate and scale down exiting to the given side. |
| Scale & Fold | |
| wf-ani-scale-in | Fade plus scale from 0.8 to 1. Duration default: 1s. |
| wf-ani-scale-out | Fade plus scale from 1 to 0.9. |
| wf-ani-unfold | Scale both axes independently of 0 (paper unfolding). |
| wf-ani-fold | Collapse scaleY then scaleXY to 0 (paper folding). |
| wf-ani-pull-up | Scale up from the bottom origin. |
| wf-ani-pull-down | Scale up from the top origin. |
| wf-ani-pull-left | Scale in from the left-edge origin. |
| wf-ani-pull-right | Scale in from a right-edge origin. |
| Attention | |
| wf-ani-pulsate | Scale pulse between 1 and 0.8. Use with wf-infinite . |
| wf-ani-bounce | Three-dot loading bounce. Requires three <span> children. Loops automatically (built-in infinite). |
| wf-ani-blink | Opacity blink. Use with wf-infinite . Duration default: 1s. |
| wf-ani-shake | Horizontal shake. Use with wf-infinite . Duration default: 1s. |
| wf-ani-hit-left | Knock to the right, then spring back, mimicking a hit from the left. |
| wf-ani-hit-right | Knock to the left, then spring back. |
| wf-ani-ball | Bouncing ball with damping. Duration default: 2s. |