32 CSS Timelines

A CSS timeline is a layout that orders content chronologically or sequentially so readers can scan the story before diving into detail. Use one whenever the DATE, STAGE, or ORDER is part of the meaning — release notes, project history, audit trails, delivery tracking, conference agendas, medical records, resume/CV. The 32 demos in this collection map to real product surfaces: GitHub-style commit history for dev-tools changelogs, CI/CD deploy pipelines with conic-gradient status spinners for DevOps dashboards, resume timelines with CSS subgrid for portfolio pages, order tracking steppers for e-commerce checkouts, product roadmaps with quarter columns for SaaS marketing pages, Gantt swimlanes for PM tools, conference agendas with hour grids, and scrollytelling panels for long-form journalism. Every demo is graded on four axes tier-1 (US/UK/CA/AU) front-end developers actually care about: (1) MODERN CSS gated properly — platform features like animation-timeline: view()/scroll(), container queries, subgrid, and :has() sit behind @supports so unsupported browsers get identical static content, never hidden behind an effect that can't play. (2) SEMANTIC & ACCESSIBLE by construction — every timeline is a semantic <ol> of <li> events, dates are real <time datetime> elements, decoration lives in aria-hidden pseudo-elements, state is never color-alone (glyph + text always). (3) PERFORMANCE and Core Web Vitals — animations are transform/opacity only, scroll effects use scroll-driven timelines instead of scroll listeners (zero main-thread cost), and 31 of 32 demos ship zero JavaScript. (4) DROP-IN PORTABILITY — each demo themes from 3-6 CSS custom properties on the .tls-NN root so retuning takes one ruleset.

Vertical is the default. It reads like prose, works on any width, and screen readers walk it in DOM order — 26 of the 32 demos in this collection ship vertical. Horizontal wins in three specific cases: (1) short repeatable cards where comparing adjacent items matters (conference agenda hour grid, flight itinerary segments, film festival strips, ticket stubs), (2) scrollytelling / panorama patterns where sideways travel IS the effect (Horizontal Panorama Timeline uses animation-timeline: scroll() to map vertical scroll to horizontal transform), (3) scroll-snap carousels where the user drives one item at a time (Cinematic Filmstrip, Ticker Tape Changelog). Avoid horizontal scroll on mobile unless the interaction feels intentional — the shipped horizontal demos all fall back to vertical stacks under 480px, or ship a documented scroll-snap fallback.

Demo 02 in this collection is a production-ready CI/CD deploy pipeline: Build → Test → Deploy stages joined by connector lines that fill with state, a conic-gradient spinner on the running step, and success/pending/failed expressed with icon AND text so it reads correctly for color-blind engineers (WCAG 1.4.1). Wire it to your CI status: (1) each stage carries a data-state attribute (data-state='success' | 'running' | 'failed' | 'pending') that drives chip color, icon, and border via attribute selectors — no class swaps needed, just one attribute per stage; (2) the connector fill uses a single --progress custom property per stage that you can set inline (--progress:100% for done, --progress:60% for a partially-complete stage) so a small server-render helper is all it takes; (3) the running spinner is @property-registered so it degrades cleanly on older browsers; (4) prefers-reduced-motion turns the spinner into a static conic pattern. Pair this with a Terminal Log timeline (Demo 19) below the pipeline for the streaming log output, and you have the Vercel / Netlify / GitHub Actions dashboard pattern in ~200 lines of CSS.

Demo 03 (Resume / Work Experience Timeline) is the reference implementation. The trick: the outer <ol> is a two-column grid (date-column | detail-column), and each <li> uses display: grid; grid-template-columns: subgrid; grid-column: 1 / -1 so its INNER date-cell and detail-cell align to the OUTER grid tracks. That means when one role has three bullet points and another has one, every date, every marker, and every description edge stays perfectly aligned across the entries — with zero manual width calculations. Subgrid is Baseline widely-available (Chrome, Safari, Firefox all shipped), and the @supports (grid-template-columns: subgrid) block wraps the alignment rules so older browsers get a graceful two-column flex fallback with slightly less-perfect alignment. This is the pattern LinkedIn, Read.cv, and every serious portfolio site ships for resume timelines — before subgrid, you needed JS to measure and align.

Demo 25 (Product Roadmap Timeline — Quarter Columns) is the public-roadmap pattern SaaS companies converge on: four quarter columns of feature cards, each double-coded with a status chip (Shipped ✓ / In progress ◐ / Planned ○), and a 'today' line dropped precisely between quarters with a labeled flag. Status is a data-status attribute driving everything (chip color + glyph + card border) via attribute selectors — no class swaps, no conditional rendering, just one attribute per card that your CMS or Airtable can populate. The 'today' line position is one --today custom property (compute it server-side: (dayOfYear/365)*100%) so it stays honest without JavaScript. Ship this as a static /roadmap page and every 'when is X coming?' support ticket has a URL to point at — Linear, Height, Notion Product, and Superhuman all ship variants of this exact pattern. The mobile fallback stacks the four quarters into a horizontal scroll-snap strip so the roadmap still reads at 375px.

Demo 04 is the modern order-tracking stepper: Placed → Packed → Shipped → Out for delivery → Delivered as a horizontal stepper whose connector fills to the current stage with one --step custom property (--step:3 means step 3 is active), an animated pulse on the live step, ETA copy, and a container-query flip to vertical layout under 480px containers. This is the exact pattern Amazon Prime, DoorDash, Uber Eats, Stripe Checkout, and Shopify Shop app converged on. Three ships you almost certainly need to add: (1) status polling — the demo is display-only; wire a small fetch on an interval to update --step and the ETA text, (2) accessibility announcement — when --step advances, add aria-live='polite' on a hidden status region so screen readers hear 'Step 3 of 5: Shipped', (3) error state — add a data-error attribute that changes the current step from amber-pulse to red-static with a 'Contact support' link. The demo ships the visual pattern; the polling + error handling is ~20 lines of JS added on your side.

Three demos in this collection ship animation-timeline: view() or scroll() as the primary motion driver. Demo 06 (Scroll-Driven Reveal Timeline) uses animation-timeline: view() so each milestone fades and rises exactly as it scrolls into the viewport — zero IntersectionObserver, zero JavaScript, and scrubbing back and forth plays the entrance forwards and backwards like a video, because the scrollbar IS the timeline. Demo 20 (Reading-Progress Timeline) uses animation-timeline: scroll() to fill a progress bar and light chapter dots as an article scrolls — the pure-CSS replacement for the scroll-listener progress bars every publisher ships in JavaScript. Demo 26 (Horizontal Panorama) maps vertical scroll to horizontal translateX across a 4-viewport-wide track — the sticky-viewport + scroll-driven-transform pattern behind award-site history pages. Every animation-timeline demo ships an @supports not fallback that delivers the identical content statically (or with a native scroll-snap carousel for the panorama) so unsupported browsers never see broken layouts. Scroll-driven animations are Baseline newly-available in Chromium and shipping stable in Safari and Firefox — check caniuse.com for the exact browser cut-off before relying on them for critical UI.

Every timeline in this collection is built on semantic <ol> or <ul> lists (never <div> stacks), so screen readers announce 'List, 5 items' before walking each event in order. Dates are real <time datetime> elements so assistive tech reads them consistently. Decorative rails, dots, and connectors live in aria-hidden pseudo-elements — never in real DOM that gets announced. Status is never color-alone — every chip carries text (Shipped / In progress / Planned) AND a glyph (✓ / ◐ / ○) alongside its color, which satisfies WCAG 1.4.1 for the ~8% of male users with red-green color blindness. Interactive timelines (Accordion Timeline uses <details name> for exclusive-open behavior, Tabbed Era uses radio inputs with :checked, Anchor-Nav uses :target for deep-linkable milestones) all work with Tab / Enter / Space and have visible focus rings via :focus-visible. Continuous animations (Terminal typing caret, EKG trace pulse, activity-feed fade-ins) all sit behind @media (prefers-reduced-motion: no-preference) with the reduced-motion path showing complete content statically.

Every demo themes from 3-6 CSS custom properties declared on the demo root (.tls-NN). Change --tl-accent for the primary color, --tl-ink for text, --tl-mut for muted text, --tl-line for rails and borders, --tl-bg for the wrapper background — the whole demo retunes without touching layout math. The class prefix .tls-NN is per-demo scoped so you can paste multiple demos into the same project without collision (paste Demo 02 + Demo 25 + Demo 08 side-by-side and they never fight). Typography swaps cleanly: the demos use Georgia / system-ui / ui-monospace by default, but you can drop Inter, Geist, or any custom stack in — the layouts are set with clamp() and ch/fr fluid units so they reflow to whatever font metrics you pick. For dark/light theming, override the tokens inside a [data-theme='dark'] block on the root or use light-dark() directly.