Foundations

Motion

Entrance, exit, and attention animations, plus decorative hover and background effects. Add a class to use them; they stop under reduced-motion.

Entrance

fade-in

fade-in-up

fade-in-down

fade-in-left

fade-in-right

fade-in-up-big

fade-in-down-big

fade-in-left-big

fade-in-right-big

zoom-in

zoom-in-up

zoom-in-down

zoom-in-left

zoom-in-right

slide-in-up

slide-in-down

slide-in-left

slide-in-right

bounce-in

bounce-in-up

bounce-in-down

bounce-in-left

bounce-in-right

flip-in-x

flip-in-y

back-in-up

back-in-down

back-in-left

back-in-right

roll-in

light-speed-in-left

light-speed-in-right

jack-in-the-box

Exit

fade-out

fade-out-up

fade-out-down

fade-out-left

fade-out-right

fade-out-up-big

fade-out-down-big

fade-out-left-big

fade-out-right-big

zoom-out

zoom-out-up

zoom-out-down

zoom-out-left

zoom-out-right

slide-out-up

slide-out-down

slide-out-left

slide-out-right

bounce-out

bounce-out-up

bounce-out-down

bounce-out-left

bounce-out-right

flip-out-x

flip-out-y

back-out-up

back-out-down

back-out-left

back-out-right

roll-out

light-speed-out-left

light-speed-out-right

hinge

Attention

bounce

flash

pulse

rubber-band

shake-x

shake-y

head-shake

swing

tada

wobble

jello

heart-beat

Text

あア Aa 彩

gradient-text

あア Aa 彩

shine-text

あア Aa 彩

glitch

Hover

lift

Hover to preview

grow

Hover to preview

glare

Hover to preview

Ambient

float

glow

shimmer

star-border

Background

aurora

gradient-bg