Animations

All Animations

Beat Animations

Rhythmic beating effects for attention-grabbing elements.

beat

beat-fade

beat-double

Blink Animations

Blinking effects for cursor-like or attention elements.

blink

blink-rapid

blink-soft

blink-alternate

Bounce Animations

Playful bouncing effects with elastic easing.

bounce

bounce-extended

bounce-rotate

bounce-multi

Elastic Animations

Springy elastic effects with overshoot.

elastic

Fade Animations

Smooth opacity transitions.

fade

fade-in

fade-out

fade-gradual

Flash Animations

Quick flashing effects for alerts and notifications.

flash

flash-fade

flash-strobe

flash-fade-slow

Flip Animations

3D flip effects along different axes.

flip

flip-horizontal

flip-vertical

flip-diagonal

flip-180-h

flip-180-v

flip-180-d

Float Animations

Gentle floating effects for dreamy UIs.

float

float-horizontal

float-rotate

Glow Animations

Glowing effects using box-shadow.

glow

glow-pulse

glow-multicolor

Heartbeat Animations

Pulsing heartbeat effects.

heartbeat

heartbeat-fast

heartbeat-slow

heartbeat-color

Jiggle Animations

Small jiggling movements.

jiggle

jiggle-vertical

jiggle-multi

jiggle-slow

Nod Animations

Nodding head-like animations.

nod

nod-slow

nod-bounce

nod-continuous

Pop Animations

Quick pop-in effects for emphasis.

pop

pop-fast

pop-slow

pop-rotate

Pulse Animations

Rhythmic pulsing scale effects.

pulse

pulse-slow

pulse-fast

pulse-color

Ripple Animations

Expanding ripple effects.

ripple

ripple-slow

ripple-multi

ripple-color

Roll Animations

Rolling entrance and movement effects.

roll

roll-reverse

roll-slow

roll-vertical

Scale Animations

Scaling transform effects.

scale-expand

scale-shrink

Shake Animations

Shaking effects for errors and attention.

shake

shake-slow

shake-horizontal

Slide Animations

Sliding entrance and exit effects.

slide-in-left

slide-in-right

slide-in-up

slide-in-down

slide-out-left

slide-out-right

slide-out-up

slide-out-down

slide-fade-in-up

slide-fade-in-down

slide-fade-in-left

slide-fade-in-right

Spin Animations

Continuous rotation effects.

spin

spin-reverse

spin-grow

spin-pulse

spin-flip

Sway Animations

Gentle swaying motions.

sway

sway-slow

sway-fast

sway-fade

Tada Animations

Celebratory attention-grabbing effects.

tada

tada-slow

tada-fast

tada-fade

Twist Animations

Twisting rotation effects.

twist

twist-slow

twist-fast

twist-color

Wave Animations

Waving hand-like motions.

wave

wave-slow

wave-fast

wave-fade

Wobble Animations

Wobbly side-to-side effects.

wobble

wobble-slow

wobble-fast

wobble-scale

Zoom Animations

Zoom in/out effects.

zoom

zoom-slow

zoom-fast

zoom-fade

Usage

// SCSS Mixin Usage .element { @include animate_bounce(); } .element-pulse { @include animate_pulse_slow(); } // With custom parameters .custom-shake { @include animate_shake($duration: 0.5s); } // CSS Class Usage <div class="animate_bounce">...</div> <div class="animate_pulse">...</div> <div class="animate_shake">...</div> // Combine with other utilities <div class="animate_fade_in delay-500">...</div>