Tag: animation

Components tagged with "animation".

28 component(s)

Scroll Reveal Animations

Elements fade, slide, zoom or flip into view on scroll using IntersectionObserver and data-sr attributes, with stagger delays and reduced-motion support.

Pure CSS Scroll Animations

Animated Gradient Background

Pure CSS hero section with a slowly shifting multi-color gradient, drifting blurred blobs and a grain overlay, customizable through CSS variables.

Pure CSS Backgrounds

Animated Gradient Text

Pure CSS animated gradient text for headings using background-clip, with four palettes, a shine sweep variant, a CSS-only pause switch and a fallback color.

Pure CSS Text Effects

Typing Text Effect

Pure CSS typewriter effect with a blinking caret, using steps() and ch units on a monospace headline and a retro terminal window with replay.

Pure CSS Text Effects

Live Analog Clock

Live analog clock with CSS-rotated hands, conic-gradient ticks, a digital readout and optional time zone support, in pure CSS and vanilla JS.

Pure CSS Clocks

Maintenance Page with Animated Gears

Dark full-page scheduled maintenance notice with interlocking SVG gears, a live countdown, progress bar and task checklist in pure CSS and vanilla JS.

Pure CSS Maintenance Pages

Pricing Cards with Hover

Three pure CSS pricing cards with hover lift and a featured plan that has a spinning conic-gradient border, glow and Most popular badge.

Pure CSS Pricing Tables

Circular Progress Indicator

SVG ring progress indicators with an animated fill, count-up percentage, glow colors and a slider-driven demo ring with color thresholds.

Pure CSS Progress Bars

Native dialog Modal

Accessible modal built on the native HTML dialog element with @starting-style enter and exit animation, blurred backdrop, mobile bottom sheet and an invite form.

Pure CSS Modals

Floating Action Button Speed Dial

Pure CSS floating action button that expands into a staggered speed dial of labeled actions, with vertical and horizontal variants and keyboard support.

Pure CSS Floating Action Buttons

Animated Hover Buttons

Eight pure CSS hover buttons with fill, diagonal, sliding text, border drawing, arrow, underline and press effects that also run on focus.

Pure CSS Button Styles

Gradient Buttons

Pure CSS gradient buttons with shifting colors on hover, a gradient outline, glow and shine effects, sizes and a disabled state.

Pure CSS Button Styles

Neon Glow Profile Card

Dark profile card with an animated neon conic-gradient border, soft glow, stats, skill tags and a Follow toggle, built with pure CSS and vanilla JS.

Pure CSS Profile Cards

Infinite Logo Marquee

Two-row infinite logo marquee with seamless CSS loop, edge fade, pause on hover, a pause button and a static fallback for reduced motion.

Pure CSS Logo Clouds

Animated Number Counters

Stats section with four number cards that count up when scrolled into view, using IntersectionObserver, locale formatting and reduced-motion support.

Pure CSS Stats Sections

Hero with Rotating Words

Dark hero section whose headline cycles through words with a slide-and-fade animation, a pause button and decorative stat cards.

Pure CSS Hero Sections

Expanding Search Bar

Search icon button that expands into a pill-shaped input, shown in a dark navbar and a large hero search, with Escape to close and a demo submit.

Pure CSS Search Bars

Day/Night Toggle

Animated pure CSS day and night toggle switch where the sun turns into a cratered moon, clouds drift away and stars appear.

Pure CSS Toggles & Switches

Animated Pill Tabs

Segmented pill tabs with a sliding, springy background, ARIA tabs keyboard support and fading panels, shown on an analytics card. Pure CSS and vanilla JS.

Pure CSS Tabs

Full-Screen Overlay Mobile Menu

Hamburger button that opens a full-screen menu with a circular clip-path reveal, staggered serif links, focus trap and Escape to close, in pure CSS and vanilla JS.

Pure CSS Mobile Menus

Navbar with Sliding Active Indicator

Dark responsive navbar with a glowing underline that slides between links on hover, focus and click, built with CSS custom properties and vanilla JS.

Pure CSS Navbars

Animated Progress Bars

Bootstrap 5 dark dashboard with labelled bars that fill on scroll, a striped animated build progress bar and a stacked storage bar.

Bootstrap 5 Progress Bars

Flip Countdown

Tailwind CSS flip-clock countdown timer with 3D split-flap cards for days, hours, minutes and seconds, reduced-motion support and a completion event.

Tailwind CSS Countdown Timers

Skeleton Card Loader

Tailwind CSS skeleton loaders for an article card grid and a list, with pulse or shimmer animation that swaps to real content once loaded.

Tailwind CSS Skeleton Loaders