jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

CSSツール

無料 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.

ツールを読み込み中...

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.

クイックアンサー

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.

制限事項

  • 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.

使い方

  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.

主な用途

  • 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.

用途

使用例

例

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.

例

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.

よくあるミス

  • 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.

検証

  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

View Transition BuilderのFAQ

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.

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください