ページ遷移もCSSで？
View Transitions APIで実現する滑らかな画面切り替え

<div class="vt-wrap">
    <div class="vt-header">
        <span>Demo App</span>
        <button class="vt-back" id="vt-back" onclick="vtBack()">← 戻る</button>
    </div>
    <div class="vt-page" id="vt-list">
        <div class="vt-list-item" onclick="vtNavigate('🎨 デザイン制作','ブランドの世界観を形にする、オリジナルのWebデザインを制作します。')">🎨 デザイン制作</div>
        <div class="vt-list-item" onclick="vtNavigate('💻 Web開発','モダンな技術でパフォーマンスの高いサイトを構築します。')">💻 Web開発</div>
        <div class="vt-list-item" onclick="vtNavigate('📊 運用・改善','公開後のデータ分析と継続的な改善をサポートします。')">📊 運用・改善</div>
    </div>
    <div class="vt-detail" id="vt-detail">
        <p class="vt-detail__title" id="vt-detail-title"></p>
        <p class="vt-detail__text" id="vt-detail-text"></p>
    </div>
</div>

// View Transitions APIを使ったDOM切り替え
function navigate(newContent) {
    if (!document.startViewTransition) {
        // 非対応ブラウザ：即座に切り替え
        updateDOM(newContent);
        return;
    }

    // 対応ブラウザ：フェード遷移付きで切り替え
    document.startViewTransition(() => {
        updateDOM(newContent);
    });
}

/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.vt-detail__text {
    /* 本体のスタイル */
}
.vt-header {
    /* 本体のスタイル */
}
.vt-detail {
    /* 本体のスタイル */
}
.vt-list-item {
    /* 本体のスタイル */
}
.vt-page {
    /* 本体のスタイル */
}
.vt-back {
    /* 本体のスタイル */
}
.vt-wrap {
    /* 本体のスタイル */
}
.vt-detail__title {
    /* 本体のスタイル */
}

/* ===== 動作のアニメーション ===== */
/* デフォルトのフェード遷移をカスタマイズ */
::view-transition-old(root) {
    animation: fade-out 0.3s ease;
}
::view-transition-new(root) {
    animation: fade-in 0.3s ease;
}

@keyframes fade-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}
@keyframes fade-in {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

<!-- head内に追加するだけ -->
<meta name="view-transition" content="same-origin">

/* スライド遷移 */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: slide-out 0.3s ease;
}
::view-transition-new(root) {
    animation: slide-in 0.3s ease;
}

@keyframes slide-out {
    to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slide-in {
    from { transform: translateX(100%); opacity: 0; }
}