7 collections

CSS Animations & Motion Effects — Free Code Collections

Motion makes interfaces feel alive. This collection covers the full range of CSS animations and motion effects — from subtle hover transitions to full scroll-triggered sequences, built with pure CSS wherever possible.

15 CSS Number Counter Animations

Featured 15

15 animated number counter examples — count-up stats, flip-digit play counters, fundraising arc meters, product launch countdowns, CO₂ impact dashboards, uptime SLA monitors, stock tickers, fitness rings and full design-language KPI dashboards. Tiny requestAnimationFrame easing in pure JS, the chrome around each counter in pure CSS. Copy, paste, ship.

css number counter count up animation count up on scroll Responsive

11 CSS Page Transitions

Featured 11

11 free CSS page transition patterns — fade, slide, scale/zoom, clip-path wipe, blur morph, 3D page turn, ink bleed, triangle shatter, split curtain, matrix rain and brushstroke. Complete interactive demos with copy-paste HTML, CSS and JavaScript.

css page transitions page transition fade transition Responsive

12 CSS Scroll Animations

Featured 12

12 full-page CSS scroll animation demos — sticky parallax cosmos, kinetic typography, staggered grid waves, animated data stats, clip-path reveals, 3D card entrances, scrollytelling product tours and more. Each demo is a complete, copy-paste-ready HTML document built with IntersectionObserver and scroll-linked motion.

css scroll animation scroll driven animation parallax scrolling Responsive

21 CSS Button Hover Effects

Featured 21

21 original CSS button hover effects — liquid fill, glitch, neon pulse, 3D flip, particle burst and more. Pure CSS with 3 vanilla JS enhancements. Copy-paste ready.

buttons hover animation Responsive

27 CSS Card Hover Effects

Featured 27

27 original CSS card hover effects — elastic lift, 3D tilt, holographic shimmer, spotlight, aurora and more. Pure CSS with 4 vanilla JS enhancements. Copy-paste ready.

cards hover animation Responsive

20 CSS Link Hover Effect Designs

Featured 20

20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.

css link hover link effects underline animation Responsive

15 Pure CSS Loading Animations

Featured 15

15 hand-coded CSS loading animations — DNA helix, liquid blob, orbit system, neon ring, hourglass flip, listing skeleton, building loader and more. Pure CSS, drop-in ready.

loading spinner animation Responsive