Attention Seekers
10 classesFading In
9 classesFading Out
9 classesBouncing In
5 classesBouncing Out
5 classesSliding In
4 classesSliding Out
4 classesZooming In
5 classesZooming Out
5 classesFlipping
5 classesRotating In
5 classesRotating Out
5 classesBack In
4 classesBack Out
4 classesLight Speed
4 classesSpecials
4 classesHelper Classes
Speed
animation-speed-fastest0.3s
animation-speed-fast0.5s
animation-speed-normal1s
animation-speed-slow1.5s
animation-speed-slowest2s
animation-speed-glacial3s
Delay
animation-delay-1000.1s
animation-delay-2000.2s
animation-delay-3000.3s
animation-delay-5000.5s
animation-delay-10001s
animation-delay-20002s
Loop / Fill / Easing
animation-loop-1once
animation-loop-22 times
animation-loop-33 times
animation-loop-44 times
animation-loop-55 times
animation-loop-foreverinfinite
animation-fill-forwardskeep end state
animation-fill-bothboth ends
animation-ease-in-outsmooth
animation-ease-bounceovershoot bounce
animation-ease-elasticelastic snap
animation-ease-springspring physics
animation-direction-reverseplay backwards
animation-direction-alternateping-pong
animation-pausedpause
animation-pause-on-hoverpause on hover
animation-speed-ultra-fast0.15s
animation-delay-7500.75s
animation-delay-15001.5s
animation-delay-25002.5s
animation-delay-30003s
Scroll-Triggered Animations
Elements start invisible and animate in when they enter the viewport. Requires a tiny IntersectionObserver script (shown below) to add .is-visible on scroll.
Aa
animate-on-scroll-fade-in
animate-on-scroll-slide-up
Aa
animate-on-scroll-zoom-in
Aa
animate-on-scroll-from-left
Aa
animate-on-scroll-from-right
Aa
scroll-reveal-once
Required: IntersectionObserver snippet
new IntersectionObserver((entries) => {
entries.forEach(e => {
if(e.isIntersecting) e.target.classList.add('is-visible');
});
}, { threshold: 0.15 }).observe(
...document.querySelectorAll('[class*="animate-on-scroll"],[class*="scroll-reveal"]')
);
Hover-Triggered Animations
Animations fire on :hover. Hover over each card to preview.
Aa
on-hover:animate-bounce
Aa
on-hover:animate-pulse
Aa
on-hover:animate-shake-x
Aa
on-hover:animate-rubber-band
Aa
on-hover:animate-tada
Aa
on-hover:animate-wobble
Aa
on-hover:animate-swing
Aa
on-hover:animate-heartbeat
Aa
on-hover:animate-spin-once
Aa
on-hover:animate-flip-once
Aa
on-hover:animate-jello
Aa
on-hover:animate-zoom-in
Text Animations
animate-typewriter
Blur
animate-text-blur-in
Gradient
animate-text-gradient-flow
Glitch
animate-text-glitch
Neon
animate-text-neon-pulse
Wave!
animate-text-wave
Staggered Entrance Sequences
Apply parent class — each child gets an automatic delay. Combine with an entrance like animate-stagger-slide-up.
stagger-fade-in + children-100
stagger-slide-up + children-200
stagger-zoom-in + children-300
animate-stagger-children-100+100ms per child
animate-stagger-children-200+200ms per child
animate-stagger-children-300+300ms per child
animate-stagger-fade-infade entrance
animate-stagger-slide-upslide-up entrance
animate-stagger-zoom-inzoom entrance
animate-stagger-from-leftfrom left entrance
animate-stagger-from-rightfrom right entrance
Morphing & Shape Animations
animate-morph-blob
animate-border-spin
animate-shimmer
animate-gradient-shift
animate-morph-circle-to-square
animate-liquid
3D Animations
Aa
animate-flip-3d-x
Aa
animate-flip-3d-y
Aa
animate-depth-in
Aa
animate-depth-out
Aa
animate-tilt-left
Aa
animate-tilt-right
Aa
animate-rotate-3d
Aa
animate-swing-3d
Exit & Page Transition Animations
Aa
animate-exit-fade-out
animate-exit-slide-left
animate-exit-slide-right
Aa
animate-exit-scale-down
Aa
animate-page-in-from-right
Aa
animate-page-in-from-left
Aa
animate-page-out-to-left
Aa
animate-page-out-to-right
Notification & UI Feedback Animations
Paired with SantyCSS components — toast, modal, drawer, dropdown, tooltip.
Toast
animate-toast-in
Toast
animate-toast-out
Modal
animate-modal-in
Modal
animate-modal-out
Drawer
animate-drawer-in-right
Bottom
animate-drawer-in-bottom
Menu
animate-dropdown-in
3
animate-badge-pop
Error!
animate-error-shake