jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose View Transition Builder

Generate View Transitions API CSS and JavaScript for smooth page and element transitions. Same-document (SPA) and cross-document (MPA) support with reduced-motion fallback.

Tool wird geladen...

Was ist View Transition Builder?

The View Transitions API creates smooth animated transitions when navigating between pages or updating page content. The browser captures screenshots of the old and new states, then crossfades between them. You can assign view-transition-name to specific elements to animate them independently during the transition. For same-document transitions (SPAs), use document.startViewTransition(). For cross-document (MPAs), add a meta tag.

Kurze Antwort

Use the View Transitions API for smooth page and element animations. For SPAs: document.startViewTransition(() => updateDOM()). For MPAs: add <meta name="view-transition" content="same-origin"> to the head. Assign view-transition-name to elements for independent animation. Always respect prefers-reduced-motion.

Einschränkungen

  • Cross-document (MPA) transitions only work between same-origin pages. Cross-origin navigation does not trigger a view transition, even with the meta tag.
  • The browser captures static screenshots of the old and new states. Live content like videos, animations, or continuously updating elements may appear frozen during the transition.
  • View Transitions are Baseline 2025: Chrome 111+, Edge 111+, Safari 18.2+. Firefox support is in development. Unsupported browsers navigate without animation — the feature degrades gracefully.

So nutzt du dieses Tool

  1. Choose the transition type: same-document (for SPA content updates) or cross-document (for MPA page navigation).
  2. Set animation duration, easing, and the view-transition-name for elements that should animate independently.
  3. Optionally customize the ::view-transition-new and ::view-transition-old pseudo-elements.
  4. Copy the CSS and JavaScript/meta tag. Enable prefers-reduced-motion fallback for accessibility.

Wofür du es nutzen kannst

  • Animate a hero image between a list page and a detail page using the same view-transition-name on both pages.
  • Add a smooth crossfade when navigating between pages in a static site by adding the view-transition meta tag.
  • Animate a gallery filter: call startViewTransition() before updating the image grid for a smooth layout change.

Anwendungsfalle

Praxisbeispiele

Beispiel

Hero image morph between pages

A blog has a hero image on the list page and a larger version on the article page. Give both images the same view-transition-name: hero-image. The browser animates the image from its list position to the article position during navigation.

Beispiel

SPA content swap

A dashboard filters a data table. Wrap the filter update in document.startViewTransition(() => updateTable()). The old table rows fade out while new rows fade in — no manual animation code needed.

Haufige Fehler

  • Giving two elements the same view-transition-name on the same page — names must be unique per page. The browser throws an error and skips the transition.
  • Forgetting the meta tag in the page head for MPA transitions — cross-document transitions do not work without it.
  • Not handling prefers-reduced-motion — users with motion sensitivity should get instant transitions instead of animations.

Überprüfung

  1. Test the transition by navigating between pages or triggering the content update and observing the animation.
  2. Verify that prefers-reduced-motion: reduce disables the transition and shows an instant content swap.

FAQ

Fragen zu View Transition Builder

Can I animate specific elements instead of the whole page?

Yes. Assign view-transition-name to individual elements (like .hero img or .card). Each named element gets its own ::view-transition-old() and ::view-transition-new() pseudo-elements that you can animate independently. Elements without a view-transition-name participate in the root crossfade.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren