View Transition API

DEMO

<div class="demo-stage"><div class="vt-wrap"><div class="vt-card" id="vtCard" style="background:#CC0076">CARD A</div><button class="vt-btn" onclick="vtToggle()">TOGGLE</button></div></div>

.vt-wrap { padding:2rem; text-align:center; }
.vt-card { display:inline-flex; align-items:center; justify-content:center; width:200px; height:200px; color:#fff; font-family:'Oswald',sans-serif; font-size:1.5rem; letter-spacing:.2em; view-transition-name:card; border-radius:12px; }
.vt-btn { display:block; margin:1.5rem auto 0; padding:.8rem 2rem; background:#1A1A1A; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; cursor:pointer; }
::view-transition-old(card), ::view-transition-new(card) { animation-duration:.6s; animation-timing-function:cubic-bezier(.4,0,.2,1); }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(card), ::view-transition-new(card) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

function vtToggle(){ const card = document.getElementById('vtCard'); const isA = card.textContent.includes('A'); const apply = () => { card.textContent = isA ? 'CARD B' : 'CARD A'; card.style.background = isA ? '#7B37A8' : '#E91B89'; card.style.borderRadius = isA ? '50%' : '12px'; }; if(document.startViewTransition){ document.startViewTransition(apply); } else { apply(); } }

AI PROMPT

View Transition APIで滑らかなコンテンツ遷移。document.startViewTransition(callback)で囲んだ変更が自動補間される。CSS側でview-transition-name:cardを付け、::view-transition-old/new疑似要素にanimation-duration:.6s+cubic-bezierを指定。Chrome・Edge 111+／Safari 18+／Firefox 144+ 対応、非対応ブラウザでは即時適用にフォールバック。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスクPR

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。