Animations

Keyframe animation utilities — 30+ named animations, modifiers (duration, delay, easing, iteration, direction, fill, play-state), hover triggers, attention seekers, loading states, and scroll-triggered animations. Click any demo box to replay.

Base usage

Apply any .lp-animate-{name} class to play the animation. Click to replay.

fade-in

bounce-in

zoom-in

<p class="lp-text-sm lp-text-muted">Apply any <code>.lp-animate-{name}</code> class to play the animation. Click to replay.</p>
<div class="lp-d-flex lp-gap-3 lp-flex-wrap lp-mt-3">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-fade-in lp-cursor-pointer" onclick="lpReplayAnimation(this)">fade-in</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-bounce-in lp-cursor-pointer" onclick="lpReplayAnimation(this)">bounce-in</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-zoom-in lp-cursor-pointer" onclick="lpReplayAnimation(this)">zoom-in</div>
</div>

Fade

fade-in

fade-out

fade-in-up

fade-in-down

fade-in-left

fade-in-right

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-fade-in lp-cursor-pointer" onclick="lpReplayAnimation(this)">fade-in</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-fade-out lp-cursor-pointer" onclick="lpReplayAnimation(this)">fade-out</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-fade-in-up lp-cursor-pointer" onclick="lpReplayAnimation(this)">fade-in-up</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-fade-in-down lp-cursor-pointer" onclick="lpReplayAnimation(this)">fade-in-down</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-fade-in-left lp-cursor-pointer" onclick="lpReplayAnimation(this)">fade-in-left</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-fade-in-right lp-cursor-pointer" onclick="lpReplayAnimation(this)">fade-in-right</div>
</div>

Slide

slide-in-up

slide-in-down

slide-in-left

slide-in-right

slide-out-up

slide-out-down

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-slide-in-up lp-cursor-pointer" onclick="lpReplayAnimation(this)">slide-in-up</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-slide-in-down lp-cursor-pointer" onclick="lpReplayAnimation(this)">slide-in-down</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-slide-in-left lp-cursor-pointer" onclick="lpReplayAnimation(this)">slide-in-left</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-slide-in-right lp-cursor-pointer" onclick="lpReplayAnimation(this)">slide-in-right</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-warning lp-text-black lp-animate-slide-out-up lp-cursor-pointer" onclick="lpReplayAnimation(this)">slide-out-up</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-warning lp-text-black lp-animate-slide-out-down lp-cursor-pointer" onclick="lpReplayAnimation(this)">slide-out-down</div>
</div>

Scale & Zoom

scale-in

scale-out

scale-up

scale-down

zoom-in

zoom-out

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-scale-in lp-cursor-pointer" onclick="lpReplayAnimation(this)">scale-in</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-scale-out lp-cursor-pointer" onclick="lpReplayAnimation(this)">scale-out</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-scale-up lp-cursor-pointer" onclick="lpReplayAnimation(this)">scale-up</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-scale-down lp-cursor-pointer" onclick="lpReplayAnimation(this)">scale-down</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-zoom-in lp-cursor-pointer" onclick="lpReplayAnimation(this)">zoom-in</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-zoom-out lp-cursor-pointer" onclick="lpReplayAnimation(this)">zoom-out</div>
</div>

Bounce, Shake & Wobble

bounce

bounce-in

bounce-out

shake

shake-horizontal

shake-vertical

wobble

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-bounce lp-cursor-pointer" onclick="lpReplayAnimation(this)">bounce</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-bounce-in lp-cursor-pointer" onclick="lpReplayAnimation(this)">bounce-in</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-bounce-out lp-cursor-pointer" onclick="lpReplayAnimation(this)">bounce-out</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white lp-animate-shake lp-cursor-pointer" onclick="lpReplayAnimation(this)">shake</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white lp-animate-shake-horizontal lp-cursor-pointer" onclick="lpReplayAnimation(this)">shake-horizontal</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white lp-animate-shake-vertical lp-cursor-pointer" onclick="lpReplayAnimation(this)">shake-vertical</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-warning lp-text-black lp-animate-wobble lp-cursor-pointer" onclick="lpReplayAnimation(this)">wobble</div>
</div>

Pulse, Heartbeat, Flash & Blink

pulse (infinite)

pulse-ring

heartbeat

flash

blink

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-pulse">pulse (infinite)</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-pulse-ring">pulse-ring</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white lp-animate-heartbeat">heartbeat</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-warning lp-text-black lp-animate-flash lp-cursor-pointer" onclick="lpReplayAnimation(this)">flash</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-blink">blink</div>
</div>

Spin & Flip

spin

spin-reverse

flip-x

flip-y

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-spin">spin</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-spin-reverse">spin-reverse</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-flip-x lp-cursor-pointer" onclick="lpReplayAnimation(this)">flip-x</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-flip-y lp-cursor-pointer" onclick="lpReplayAnimation(this)">flip-y</div>
</div>

Expressive (swing, jello, tada, rubber-band, float, glow)

swing

jello

tada

rubber-band

float

glow

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-swing lp-cursor-pointer" onclick="lpReplayAnimation(this)">swing</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-jello lp-cursor-pointer" onclick="lpReplayAnimation(this)">jello</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-warning lp-text-black lp-animate-tada lp-cursor-pointer" onclick="lpReplayAnimation(this)">tada</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white lp-animate-rubber-band lp-cursor-pointer" onclick="lpReplayAnimation(this)">rubber-band</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-float">float</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-glow">glow</div>
</div>

Duration modifiers

Combine any animation with .lp-animate-duration-{100..3000} or named .lp-animate-{faster|fast|normal|slow|slower}. Click to replay.

faster (200ms)

fast (400ms)

normal (600ms)

slow (1000ms)

slower (2000ms)

<p class="lp-text-sm lp-text-muted">Combine any animation with <code>.lp-animate-duration-{100..3000}</code> or named <code>.lp-animate-{faster|fast|normal|slow|slower}</code>. Click to replay.</p>
<div class="lp-d-flex lp-gap-3 lp-flex-wrap lp-mt-3">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-bounce-in lp-animate-faster lp-cursor-pointer" onclick="lpReplayAnimation(this)">faster (200ms)</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-bounce-in lp-animate-fast lp-cursor-pointer" onclick="lpReplayAnimation(this)">fast (400ms)</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-bounce-in lp-animate-normal lp-cursor-pointer" onclick="lpReplayAnimation(this)">normal (600ms)</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-bounce-in lp-animate-slow lp-cursor-pointer" onclick="lpReplayAnimation(this)">slow (1000ms)</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-bounce-in lp-animate-slower lp-cursor-pointer" onclick="lpReplayAnimation(this)">slower (2000ms)</div>
</div>

Delay modifiers

Stagger animations with .lp-animate-delay-{100..2000}. Click any to replay the full stagger.

delay 0

200ms

400ms

700ms

1000ms

<p class="lp-text-sm lp-text-muted">Stagger animations with <code>.lp-animate-delay-{100..2000}</code>. Click any to replay the full stagger.</p>
<div class="lp-d-flex lp-gap-3 lp-flex-wrap lp-mt-3" onclick="this.querySelectorAll('.lp-demo-box').forEach(lpReplayAnimation)">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-fade-in-up">delay 0</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-fade-in-up lp-animate-delay-200">200ms</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-fade-in-up lp-animate-delay-400">400ms</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-fade-in-up lp-animate-delay-700">700ms</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-fade-in-up lp-animate-delay-1000">1000ms</div>
</div>

Easing modifiers

Override timing with .lp-animate-{ease|ease-in|ease-out|ease-in-out|linear|bounce-ease|elastic|spring}.

linear

ease-in-out

bounce-ease

elastic

spring

<p class="lp-text-sm lp-text-muted">Override timing with <code>.lp-animate-{ease|ease-in|ease-out|ease-in-out|linear|bounce-ease|elastic|spring}</code>.</p>
<div class="lp-d-flex lp-gap-3 lp-flex-wrap lp-mt-3">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-fade-in-up lp-animate-linear lp-animate-slow lp-cursor-pointer" onclick="lpReplayAnimation(this)">linear</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-fade-in-up lp-animate-ease-in-out lp-animate-slow lp-cursor-pointer" onclick="lpReplayAnimation(this)">ease-in-out</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-fade-in-up lp-animate-bounce-ease lp-animate-slow lp-cursor-pointer" onclick="lpReplayAnimation(this)">bounce-ease</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-fade-in-up lp-animate-elastic lp-animate-slow lp-cursor-pointer" onclick="lpReplayAnimation(this)">elastic</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-fade-in-up lp-animate-spring lp-animate-slow lp-cursor-pointer" onclick="lpReplayAnimation(this)">spring</div>
</div>

Iteration, direction, fill & play-state

twice

thrice

alternate

pause-hover

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-bounce lp-animate-twice lp-cursor-pointer" onclick="lpReplayAnimation(this)">twice</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-animate-bounce lp-animate-thrice lp-cursor-pointer" onclick="lpReplayAnimation(this)">thrice</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-animate-fade-in-up lp-animate-direction-alternate lp-animate-twice lp-cursor-pointer" onclick="lpReplayAnimation(this)">alternate</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-animate-pulse lp-animate-pause-hover">pause-hover</div>
</div>

Hover animate triggers

Hover any box — animations play without JS.

pulse

bounce

shake

swing

wobble

jello

tada

rubber-band

heartbeat

float

<p class="lp-text-sm lp-text-muted">Hover any box — animations play without JS.</p>
<div class="lp-d-flex lp-gap-3 lp-flex-wrap lp-mt-3">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-hover-animate-pulse">pulse</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-hover-animate-bounce">bounce</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white lp-hover-animate-shake">shake</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-warning lp-text-black lp-hover-animate-swing">swing</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-hover-animate-wobble">wobble</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-hover-animate-jello">jello</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-hover-animate-tada">tada</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white lp-hover-animate-rubber-band">rubber-band</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white lp-hover-animate-heartbeat">heartbeat</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-hover-animate-float">float</div>
</div>

Hover transforms

hover-scale-up

hover-scale-down

hover-lift

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-hover-scale-up">hover-scale-up</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-hover-scale-down">hover-scale-down</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-hover-lift">hover-lift</div>
</div>

Attention seekers (infinite)

pulse

bounce

shake

heartbeat

float

glow

blink

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-attention-pulse">pulse</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-attention-bounce">bounce</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white lp-attention-shake">shake</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white lp-attention-heartbeat">heartbeat</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-attention-float">float</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-attention-glow">glow</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-warning lp-text-black lp-attention-blink">blink</div>
</div>

Loading states

spin

pulse

bounce

<div class="lp-d-flex lp-gap-4 lp-items-center lp-flex-wrap">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white lp-loading-spin">spin</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white lp-loading-pulse">pulse</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white lp-loading-bounce">bounce</div>
    <span class="lp-loading-dots lp-text-primary"><span></span><span></span><span></span></span>
</div>

Scroll-triggered

Add data-lp-component="animate-on-scroll" to any element with a .lp-scroll-fade-in-* class. Element fades in when it enters the viewport.

Scroll down ↓

scroll-fade-in-up

scroll-fade-in-left

scroll-fade-in-right

scroll-fade-in-down

<p class="lp-text-sm lp-text-muted">Add <code>data-lp-component="animate-on-scroll"</code> to any element with a <code>.lp-scroll-fade-in-*</code> class. Element fades in when it enters the viewport.</p>
<div class="lp-demo-frame lp-p-4" style="max-height: 240px; overflow-y: auto;">
    <div style="height: 220px;" class="lp-text-muted lp-text-center lp-pt-5">Scroll down ↓</div>
    <div class="lp-demo-box lp-w-full lp-bg-primary lp-text-white lp-text-center lp-scroll-fade-in-up lp-mb-3" data-lp-component="animate-on-scroll">scroll-fade-in-up</div>
    <div class="lp-demo-box lp-w-full lp-bg-success lp-text-white lp-text-center lp-scroll-fade-in-left lp-mb-3" data-lp-component="animate-on-scroll">scroll-fade-in-left</div>
    <div class="lp-demo-box lp-w-full lp-bg-info lp-text-white lp-text-center lp-scroll-fade-in-right lp-mb-3" data-lp-component="animate-on-scroll">scroll-fade-in-right</div>
    <div class="lp-demo-box lp-w-full lp-bg-warning lp-text-black lp-text-center lp-scroll-fade-in-down" data-lp-component="animate-on-scroll">scroll-fade-in-down</div>
</div>

CSS Reference

Class	Description
`.lp-animate-fade-{in\|out\|in-up\|in-down\|in-left\|in-right}`	Fade animations
`.lp-animate-slide-{in\|out}-{up\|down\|left\|right}`	Slide animations
`.lp-animate-{scale-in\|scale-out\|scale-up\|scale-down\|zoom-in\|zoom-out}`	Scale/zoom
`.lp-animate-{bounce\|bounce-in\|bounce-out}`	Bounce family
`.lp-animate-{shake\|shake-horizontal\|shake-vertical}`	Shake family
`.lp-animate-{pulse\|pulse-ring\|heartbeat}`	Pulse family (infinite)
`.lp-animate-{spin\|spin-reverse}`	Spin (infinite)
`.lp-animate-{flip-x\|flip-y}`	3D flip
`.lp-animate-{swing\|wobble\|jello\|tada\|rubber-band\|flash\|blink\|float\|glow}`	Expressive
`.lp-animate-duration-{100..3000}` / `.lp-animate-{faster\|fast\|normal\|slow\|slower}`	Duration override
`.lp-animate-delay-{100..2000}`	Animation delay
`.lp-animate-{ease\|ease-in\|ease-out\|ease-in-out\|linear\|bounce-ease\|elastic\|spring}`	Timing function
`.lp-animate-{once\|twice\|thrice\|infinite}`	Iteration count
`.lp-animate-direction-{normal\|reverse\|alternate\|alternate-reverse}`	Direction
`.lp-animate-fill-{none\|forwards\|backwards\|both}`	Fill mode
`.lp-animate-{running\|paused}` / `.lp-animate-pause-hover`	Play state
`.lp-hover-animate-{pulse\|bounce\|shake\|swing\|wobble\|jello\|tada\|rubber-band\|heartbeat\|float}`	Hover triggers
`.lp-hover-{scale-up\|scale-down\|lift}`	Hover transforms
`.lp-attention-{pulse\|bounce\|shake\|heartbeat\|float\|glow\|blink}`	Attention seekers
`.lp-loading-{spin\|pulse\|bounce\|dots}`	Loading indicators
`.lp-scroll-fade-in-{up\|down\|left\|right}` + `data-lp-component="animate-on-scroll"`	Scroll-triggered