GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

view transitions api 9가지 — 값 하나로 화면 잇기

· Godrich · 9종 · 15분 읽기

전환바닐라 JS클릭내비게이션

화면이 그대로 이어진 것처럼 보이지만 실제로는 직전 화면을 스냅샷 값으로 남겨 다음 화면과 겹쳐 지나간다 — 이름표 값으로 요소를 짝짓고, 지원 여부 값으로 물러나고, 동작 줄임 값으로 지속시간을 끈다.

고유 이름표 값으로 요소를 짝지어 잇는 전환01 view-transition-name-pair-swap 실제 문서 이동에도 끊기지 않는 문서 간 전환02 view-transition-mpa-cross-document 누른 지점 값에서 둥글게 번지는 전환03 view-transition-clip-circle-reveal 부모·자식을 한 묶음으로 같이 옮기는 중첩 전환04 view-transition-group-nested 요소군마다 다른 감속 값을 주는 클래스 지정 전환05 view-transition-class-custom-easing 이동 방향 값을 읽어 반대로 도는 슬라이드 전환06 view-transition-direction-aware-slide 지원 여부 값을 먼저 확인해 물러나는 전환07 view-transition-skip-fallback 정렬 순서 값이 바뀔 때 미끄러지는 전환08 view-transition-list-reorder 동작 줄임 값을 감지해 전환을 끄는 안전장치09 view-transition-reduced-motion-guard

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 가지 뷰 트랜지션 패턴 — 어디서 스냅샷 값이 갈리는가

아래 아홉 개 view transitions api demo 는 모두 같은 자리에서 시작합니다. 문서 최상단에서 var SUPPORTS_VT = 'startViewTransition' in document; 값을 한 번만 계산해 두고, 그 값이 참일 때만 document.startViewTransition 을 불러 화면을 바꿉니다. 값이 거짓이면 전환 없이 곧바로 다음 상태를 그려, 이 값 하나가 아홉 항목 전체의 갈림길이 됩니다.

항목마다 클릭과 키보드(Enter · Space)로 같은 동작을 걸 수 있게 리스너를 두 갈래로 달아 두었습니다. 마우스만 쓰는 사람과 키보드만 쓰는 사람이 같은 결과를 보게 하려는 값 설계이며, 이 공통 골격 위에서 항목마다 무엇에 이름표 값을 붙이는지, 어디서 반지름·방향·클래스 값을 계산하는지가 달라집니다. 값 하나하나의 정확한 동작 범위는 MDN 의 View Transitions API 문서에서 확인할 수 있습니다.

항목 07 폴백이 먼저 와야 하는 이유

아홉 항목 중 07 은 새로운 전환 방식을 보여주지 않습니다. 대신 나머지 여덟 항목이 전부 기대고 있는 규칙, 즉 지원 여부 값을 먼저 확인하고 그 값에 따라 갈라지는 규칙 자체를 보여줍니다. SUPPORTS_VT 가 참이면 document.startViewTransition(fn) 으로 감싸 스냅샷을 겹쳐 전환하고, 거짓이면 fn() 을 그 자리에서 바로 불러 애니메이션 없이 상태만 바꿉니다.

이 갈림길을 먼저 짚어 두는 이유는 간단합니다 — 01 의 이름표 짝짓기도, 03 의 원형 확산도, 08 의 정렬 이동도 결국은 startViewTransition 콜백 안에서 상태를 바꾸는 함수 하나로 수렴하고, 그 함수를 부르는 조건은 07 에서 이미 정해져 있기 때문입니다. 아래 01부터 09까지, 각 항목이 이 조건 위에 무엇을 얹는지 하나씩 봅니다.

01고유 이름표 값으로 요소를 짝지어 잇는 전환

카드를 열 때마다 assignName() 함수가 방금 선택된 카드 하나에만 이름표 값 np-shared 를 실어 보내고, 나머지 카드에는 값을 비워 둡니다. 상세 패널에도 같은 이름표 값을 붙여 두면 브라우저가 두 요소를 자동으로 짝지어, 카드 하나가 패널 크기로 늘어나는 것처럼 스냅샷 사이를 보간합니다. 패널을 닫을 때는 반대 순서로 이름표 값을 지워, 다음 전환이 새로 고른 카드에서만 다시 일어나게 합니다.

고유 이름표 값으로 요소를 짝지어 잇는 전환
새 창에서 열기

01 · 고유 이름표 값으로 요소를 짝지어 잇는 전환 — 측정 누적면적 44.292% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

view-transition-name::view-transition-group(np-shared)$duration
  // 계산 겹: 이름표 값(view-transition-name)을 그 순간 선택된 카드 하나에만 실어 보낸다 —
  // 모든 카드에 상시 부여하면 이름이 겹쳐 매칭이 깨진다. 값은 매번 새로 계산해서 준다.
  function assignName(id, on) {
    cards[id].style.viewTransitionName = on ? 'np-shared' : '';
  }

  function openRender(id) {
    if (opened !== null) assignName(opened, false);
    assignName(id, true);
    detail.style.viewTransitionName = 'np-shared';
    grid.hidden = true;
    detail.hidden = false;
    detailBadge.textContent = DATA[id].b;
    detailTitle.textContent = DATA[id].t;
    nameEl.textContent = 'card-' + id;
    opened = id;
  }

  function closeRender() {
    detail.hidden = true;
    grid.hidden = false;
    if (opened !== null) assignName(opened, false);
    detail.style.viewTransitionName = '';
    opened = null;
  }

02실제 문서 이동에도 끊기지 않는 문서 간 전환

이 항목은 실제 문서 두 개를 오가는 대신, 같은 문서 안에서 주소 표시줄 값과 문서 A·B 영역만 바꿔치기해 cross-document 전환을 흉내 냅니다 — 실제 페이지를 다시 불러오는 동작은 없습니다. human() 함수는 사용자가 처음으로 실제 조작을 하는 순간 is-demo 클래스를 떼어, 자동 재생되던 시연 상태에서 손으로 넘기는 상태로 바꿉니다.

실제 문서 이동에도 끊기지 않는 문서 간 전환
새 창에서 열기

02 · 실제 문서 이동에도 끊기지 않는 문서 간 전환 — 측정 누적면적 11.061% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

view-transition-name::view-transition-group(root)startViewTransition
  // 시뮬레이션 안내: 실제 문서 간(MPA) 전환은 브라우저가 @view-transition { navigation: auto }
  // 규칙을 문서마다 읽어 두 문서의 스냅샷을 자동으로 잇는다. 이 데모는 같은 문서 안에서
  // 주소 표시줄 값과 문서 A/B 전환만 흉내 낸 것으로, 실제 페이지 이동·불러오기는 없다.
  var root = document.getElementById('mp');
  var bar = document.getElementById('mpBar');
  var urlEl = document.getElementById('mpUrl');
  var list = document.getElementById('mpList');
  var article = document.getElementById('mpArticle');
  var openBtn = document.getElementById('mpOpen');
  var backBtn = document.getElementById('mpBack');
  var chipList = document.getElementById('mpChipList');
  var chipArt = document.getElementById('mpChipArt');
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var atArticle = false;
  var isDemo = true;

  function human() {
    if (isDemo) { root.classList.remove('is-demo'); isDemo = false; }
  }

03누른 지점 값에서 둥글게 번지는 전환

클릭 좌표(x, y)를 받은 playClip() 은 그 지점에서 패널 모서리까지의 가장 먼 반지름 값을 계산한 뒤, 패널에 이름표 값 cr-panel 을 붙이고 startViewTransition 을 부릅니다. 전환이 준비되는 시점(t.ready)에 문서 자체를 대상으로 clipPath 값을 시작 반지름에서 계산된 반지름까지 키우는 애니메이션을 걸어, ::view-transition-new(cr-panel) 의사 요소 안쪽에서만 다음 화면이 드러나게 합니다. 지원 값이 없거나 애니메이션 API 가 없으면 이 함수는 즉시 renderState() 로 물러납니다.

누른 지점 값에서 둥글게 번지는 전환
새 창에서 열기

03 · 누른 지점 값에서 둥글게 번지는 전환 — 측정 누적면적 29.044% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

farthestCornerRadius::view-transition-new(cr-panel)CLIP_START_RADIUS_PX
  function playClip(x, y, rect) {
    if (!SUPPORTS_VT || !panel.animate) { renderState(); return; }
    var radius = farthestCornerRadius(x, y, rect);
    panel.style.viewTransitionName = 'cr-panel';
    var t = document.startViewTransition(function () { renderState(); });
    t.ready.then(function () {
      document.documentElement.animate(
        { clipPath: ['circle(' + CLIP_START_RADIUS_PX + 'px at ' + x + 'px ' + y + 'px)', 'circle(' + radius.toFixed(1) + 'px at ' + x + 'px ' + y + 'px)'] },
        { duration: 520, easing: 'ease-in', pseudoElement: '::view-transition-new(cr-panel)' }
      );
    });
    t.finished.then(function () { panel.style.viewTransitionName = ''; });
  }

04부모·자식을 한 묶음으로 같이 옮기는 중첩 전환

.gn__card 는 자신의 이름표 값(gn-card)을 갖고, 그 안의 .gn__thumb·.gn__title 도 각각 이름표 값을 가지면서 view-transition-group: nearest 를 함께 선언해 가장 가까운 조상 그룹에 묶입니다. 카드가 열림 상태로 바뀌며 썸네일·제목의 크기와 글자 크기가 커질 때, 바깥 틀과 안쪽 요소가 같은 그룹 값 안에서 함께 움직여 부모만 먼저 커지고 자식이 뒤늦게 튀는 어긋남이 생기지 않습니다.

부모·자식을 한 묶음으로 같이 옮기는 중첩 전환
새 창에서 열기

04 · 부모·자식을 한 묶음으로 같이 옮기는 중첩 전환 — 측정 누적면적 44.171% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

::view-transition-group(gn-card)::view-transition-group(gn-thumb)::view-transition-group(gn-title)
.gn__card {
  view-transition-name: gn-card;
  position: relative; width: 100%; box-sizing: border-box; border: none; cursor: pointer;
  display: flex; align-items: center; gap: $sp-3; text-align: left;
  background: $subject-cream; border-radius: $r-card; padding: $sp-3;
  box-shadow: $shadow-raised;
}
.gn__card:focus-visible { outline: 2px solid $color; outline-offset: 2px; }

.gn__thumb {
  view-transition-name: gn-thumb;
  view-transition-group: nearest;
  width: 56px; height: 56px; border-radius: $r-control; background: $color; flex: 0 0 auto;
}
.gn__title {
  view-transition-name: gn-title;
  view-transition-group: nearest;
  font: 700 14px/1.3 -apple-system, "Segoe UI", sans-serif; color: $subject-ink;
}

.gn__card.is-open {
  flex-direction: column; align-items: flex-start; gap: $sp-3; padding: $sp-5;
}
.gn__card.is-open .gn__thumb { width: 100%; height: 96px; border-radius: $r-card; }
.gn__card.is-open .gn__title { font-size: 18px; }

05요소군마다 다른 감속 값을 주는 클래스 지정 전환

.ce__btn 에는 view-transition-class: vt-fast 값이 붙어 있어, 이름표 값은 제각각이어도 같은 클래스 값을 가진 요소들을 ::view-transition-group(.vt-fast) 하나로 묶어 지속시간을 따로 줄 수 있습니다. 느리게 움직여야 하는 쪽은 vt-slow 클래스로 묶어 지속시간을 절반 넘게 늘리고, 버튼 쪽은 vt-fast 클래스로 묶어 더 짧은 값과 통통 튀는 감속 곡선을 씁니다.

요소군마다 다른 감속 값을 주는 클래스 지정 전환
새 창에서 열기

05 · 요소군마다 다른 감속 값을 주는 클래스 지정 전환 — 측정 누적면적 29.267% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

view-transition-class::view-transition-group(.vt-slow)::view-transition-group(.vt-fast)
.ce__btn {
  view-transition-name: ce-btn;
  view-transition-class: vt-fast;
  align-self: flex-start; border: none; border-radius: $r-pill; cursor: pointer;
  background: $subject-cream; color: $subject-ink; font: 700 12px/1 -apple-system, sans-serif;
  padding: $sp-2 $sp-4;
}
.is-wide .ce__btn { align-self: flex-end; }
.ce__btn:focus-visible { outline: 2px solid $subject-cream; outline-offset: 2px; }

// 실사용 원리: view-transition-class 값(vt-slow·vt-fast)을 요소마다 다르게 달아 두면
// 이름은 제각각이어도 ::view-transition-group(.클래스) 로 한 번에 묶어 지속시간을 나눌 수 있다 —
// 배경은 느리게(감속 값 큼) 버튼은 빠르게(감속 값 작음) 같은 트리거에서 서로 다른 속도로 움직인다.
::view-transition-group(.vt-slow) {
  animation-duration: $duration / 2.2;
  animation-timing-function: $easing;
}
::view-transition-group(.vt-fast) {
  animation-duration: $dur-quick;
  animation-timing-function: $ease-pop;
}

06이동 방향 값을 읽어 반대로 도는 슬라이드 전환

goto() 는 다음 인덱스와 현재 인덱스의 차이에서 부호만 취해 이동 방향 값(dir, +1 또는 -1)을 구하고, 그 값을 CSS 변수 --dir 로 문서에 실어 보냅니다. change() 함수는 지원 값이 있을 때만 startViewTransition 으로 감싸고 없으면 render() 를 바로 불러, 같은 코드가 매번 반대 방향으로 슬라이드하는 경우와 즉시 전환하는 경우를 모두 처리합니다.

이동 방향 값을 읽어 반대로 도는 슬라이드 전환
새 창에서 열기

06 · 이동 방향 값을 읽어 반대로 도는 슬라이드 전환 — 측정 누적면적 31.792% · 움직인 프레임 6/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

--dir::view-transition-old(ds-step)$slide-travel-pct
  function change(fn) {
    if (SUPPORTS_VT) { document.startViewTransition(fn); }
    else { fn(); }
  }

  function goto(newIdx) {
    if (newIdx === idx || newIdx < 0 || newIdx > 3) return;
    // 계산 겹: 다음 인덱스 - 현재 인덱스의 부호만 취해 이동 방향 값을 얻는다 (+1 앞으로 · -1 뒤로)
    var dir = Math.sign(newIdx - idx) || 1;
    document.documentElement.style.setProperty('--dir', String(dir));
    change(function () { render(newIdx); });
  }

07지원 여부 값을 먼저 확인해 물러나는 전환

step() 은 지원 여부 값과 시뮬레이션용 값을 함께 확인해 willUseTransition 값을 만들고, 그 값이 참일 때만 document.startViewTransition(applyState) 를 부릅니다. 거짓이면 applyState() 를 곧바로 불러 화면이 끊기지 않고 즉시 다음 상태로 넘어갑니다. renderLabels() 는 이 결과를 '전환 사용'과 '즉시 전환(대체)' 문구로 화면에 그대로 보여줍니다.

지원 여부 값을 먼저 확인해 물러나는 전환
새 창에서 열기

07 · 지원 여부 값을 먼저 확인해 물러나는 전환 — 측정 누적면적 9.112% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

startViewTransition::view-transition-old(sf-card)SUPPORTS_VT
  function renderLabels(usedTransition) {
    supportEl.textContent = simulateUnsupported ? '지원 값 아니오' : '지원 값 예';
    pathEl.textContent = usedTransition ? '전환 사용' : '즉시 전환(대체)';
    pathEl.classList.toggle('is-fallback', !usedTransition);
  }

  function applyState() {
    si = (si + 1) % STATES.length;
    numEl.textContent = STATES[si];
    card.classList.toggle('is-alt', si % 2 === 1);
  }

  // 이 함수가 규칙의 핵심이다: 지원 여부 값을 먼저 확인하고(SUPPORTS_VT), 시뮬레이션으로
  // "지원하지 않는 환경"을 흉내 낼 때는 지원 여부와 무관하게 즉시 전환(대체) 경로로 물러난다.
  function step() {
    var willUseTransition = SUPPORTS_VT && !simulateUnsupported;
    if (willUseTransition) {
      document.startViewTransition(applyState);
    } else {
      applyState();
    }
    renderLabels(willUseTransition);
  }

08정렬 순서 값이 바뀔 때 미끄러지는 전환

카드마다 lr-item- 뒤에 데이터 id 값을 붙인 고유 이름표 값을 미리 심어 둬, 정렬 순서가 바뀌어 DOM 순서가 달라져도 브라우저가 같은 카드를 계속 같은 요소로 알아봅니다. render() 는 가격 값을 기준으로 배열을 다시 정렬한 뒤 appendChild 로 새 순서대로 다시 붙이는데, 이때 카드가 사라졌다 나타나는 대신 이전 자리에서 새 자리까지 미끄러지듯 이동합니다.

정렬 순서 값이 바뀔 때 미끄러지는 전환
새 창에서 열기

08 · 정렬 순서 값이 바뀔 때 미끄러지는 전환 — 측정 누적면적 26.685% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

viewTransitionName::view-transition-group(*)appendChild
  // 계산 겹: 카드마다 데이터 id 값으로 고유한 이름표 값을 지어 붙인다 — 순서가 바뀌어도
  // 같은 카드는 같은 이름표를 유지하니 브라우저가 "이 카드가 저 자리로 이동했다"를 알 수 있다.
  items.forEach(function (el) {
    el.style.viewTransitionName = 'lr-item-' + el.dataset.id;
  });

  var asc = true;
  var isDemo = true;

  function human() {
    if (isDemo) { root.classList.remove('is-demo'); isDemo = false; }
  }

  function render() {
    var sorted = items.slice().sort(function (a, b) {
      var av = Number(a.querySelector('.lr__price').dataset.v);
      var bv = Number(b.querySelector('.lr__price').dataset.v);
      return asc ? av - bv : bv - av;
    });
    sorted.forEach(function (el) { list.appendChild(el); });
    sortBtn.textContent = asc ? '가격 오름차순' : '가격 내림차순';
  }

09동작 줄임 값을 감지해 전환을 끄는 안전장치

effectiveReduce() 는 시스템의 실제 동작 줄임 값과 시연용 값을 하나로 합쳐 반환하고, step() 은 그 값이 참이면 지속시간을 0으로 낮춰 화면을 즉시 바꿉니다. 값이 거짓이고 지원 값도 참일 때만 document.startViewTransition(render) 를 불러 앞의 여덟 항목과 같은 전환이 재생됩니다.

동작 줄임 값을 감지해 전환을 끄는 안전장치
새 창에서 열기

09 · 동작 줄임 값을 감지해 전환을 끄는 안전장치 — 측정 누적면적 8.36% · 움직인 프레임 6/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

effectiveReduce::view-transition-new(rg-card)SUPPORTS_VT
  // 계산 겹: 실제 동작 줄임 값과 시연용 값을 합쳐 하나의 효과값으로 만들고, 그 값에 따라
  // 지속시간을 0으로 낮출지 정상값을 쓸지 결정한다 — 접근성 판단은 항상 REAL_REDUCE 를 포함한다.
  function effectiveReduce() { return REAL_REDUCE || simulateReduce; }

  function step() {
    var reduceNow = effectiveReduce();
    var dur = reduceNow ? 0 : NORMAL_MS;
    reduceEl.textContent = reduceNow ? '동작 줄임 켜짐' : '동작 줄임 꺼짐';
    durVEl.textContent = String(dur);

    if (SUPPORTS_VT && !reduceNow) {
      document.startViewTransition(render);
    } else {
      render();
    }
  }

함정 셋 — 이름표 값이 겹치거나 사라질 때 깨지는 곳

첫째, 같은 이름표 값을 가진 요소가 화면에 동시에 두 개 이상 있으면 브라우저는 어느 쪽과 짝지어야 할지 정하지 못해 전환을 건너뜁니다. 01 의 assignName() 이 새 카드를 열기 전에 반드시 이전 카드의 이름표 값부터 비우는 이유가 이것입니다 — 값을 먼저 지우지 않으면 두 카드가 한순간 같은 이름표 값을 나눠 갖습니다.

둘째, view-transition-name 의 기본값은 아무 이름표 값도 주지 않은 상태와 같아서, 그런 요소는 어떤 전환에도 짝지어지지 않습니다. 이름표 값을 요소마다 손으로 다 정하기 번거롭다면 view transition name auto 값을 줘, 브라우저가 요소마다 고유한 값을 자동으로 지어 붙이게 할 수 있습니다 — 다만 여러 요소에 한꺼번에 이 값을 주면 각각 다른 시점에 움직여 장면이 조각조각 끊겨 보일 수 있습니다.

셋째, 화면 크기가 전환 도중 갑자기 바뀌면 짝지어진 두 스냅샷의 비율이 어긋나 늘어나는 방향이 이상하게 튈 수 있습니다. 전환을 걸기 직전에 레이아웃이 안정된 상태인지 먼저 확인하는 편이 안전합니다.

접근성과 동작 줄임(reduced-motion) 값을 지키는 법

시스템의 동작 줄임 설정이 켜져 있어도 브라우저가 자동으로 지속시간을 줄여 주지는 않습니다 — 그 판단은 개발자가 CSS 와 JS 양쪽에서 직접 처리해야 합니다. 이 페이지의 모든 항목은 window.matchMedia('(prefers-reduced-motion: reduce)').matches 값을 읽어 그 값이 참이면 ::view-transition-* 규칙에 animation: none 을 걸거나 지속시간을 0으로 낮춰, 스냅샷이 겹치는 구간 없이 상태만 즉시 바뀌게 합니다.

09 는 이 판단을 가장 분명하게 보여줍니다 — 실제 동작 줄임 값과 시연용 값을 하나로 합친 뒤, 그 값이 참이면 지속시간을 0으로 낮추고 지원 여부 값과 함께 거짓일 때만 전환을 겁니다. 나머지 여덟 항목도 같은 판단 위에서 동작하며, 이 판단을 건너뛰면 동작에 민감한 사용자에게 원치 않는 움직임을 그대로 보여주게 됩니다. 정확한 값의 정의는 MDN 의 prefers-reduced-motion 문서에 있습니다.

측정 표 — 아홉 항목이 움직인 면적과 프레임

직접 렌더링한 화면을 프레임 단위로 비교해 얻은 값입니다. 누적면적은 전환되는 동안 화면에서 실제로 바뀐 영역 비율의 합, 강도 평균은 그 변화의 세기, 움직인 프레임은 전체 23 구간 중 값이 실제로 달라진 구간 수입니다.

항목 누적면적 강도 평균 움직인 프레임
01 고유 이름표 값으로 요소를 짝지어 잇는 전환 44.3% 59.7 7/23
02 실제 문서 이동에도 끊기지 않는 문서 간 전환 11.1% 35.8 10/23
03 누른 지점 값에서 둥글게 번지는 전환 29.0% 167.8 12/23
04 부모·자식을 한 묶음으로 같이 옮기는 중첩 전환 44.2% 116.4 12/23
05 요소군마다 다른 감속 값을 주는 클래스 지정 전환 29.3% 122.8 14/23
06 이동 방향 값을 읽어 반대로 도는 슬라이드 전환 31.8% 90.5 6/23
07 지원 여부 값을 먼저 확인해 물러나는 전환 9.1% 93.2 9/23
08 정렬 순서 값이 바뀔 때 미끄러지는 전환 26.7% 59.4 12/23
09 동작 줄임 값을 감지해 전환을 끄는 안전장치 8.4% 150.7 6/23

변형 세 가지로 값만 바꿔 느낌을 비교한다

항목 값 느낌
01 전환 지속시간 값 조정 $duration 600ms → 300ms 지속시간 값을 줄이면 스냅샷이 겹치는 시간이 짧아져 화면이 끊어지듯 빠르게 바뀌고, 값을 늘리면 두 화면이 겹쳐 있는 구간이 길어져 다음 화면이 서서히 스며듭니다.
03 원형 확산 시작 반지름 값 조정 CLIP_START_RADIUS_PX 0 → 48 시작 반지름 값을 0에 가깝게 낮추면 누른 지점 한 점에서 원이 열리듯 시작되고, 값을 키우면 처음부터 넓은 원으로 시작해 확산이라기보다 겹쳐 놓은 두 화면이 빠르게 자리를 바꾸는 것처럼 보입니다.
06 방향 슬라이드 이동 거리 값 조정 $slide-travel-pct 100% → 40% 이동 거리 값을 화면 너비의 절반 아래로 줄이면 다음 화면이 화면 한쪽에 걸친 채로 슬라이드가 끝나 두 화면이 잠깐 겹쳐 보이고, 값을 화면 너비 이상으로 늘리면 다음 화면이 완전히 바깥에서 들어와 겹침 없이 딱 맞아떨어집니다.

어디에 붙이나 — 카드 상세, 정렬 목록, 테마 전환

이 아홉 가지를 실제 프로젝트 파일로 가져가려면 압축을 풀 때 비밀번호 va4qdsmz 을 입력해야 합니다.

01 의 이름표 짝짓기는 목록 카드를 눌러 상세 화면으로 넘어가는 자리에 그대로 붙습니다 — 카드 썸네일이 상세 이미지로, 카드 제목이 상세 제목으로 자연스럽게 늘어나 보이려면 카드와 상세 쪽 요소에 같은 이름표 값만 맞춰 주면 됩니다.

03 의 원형 확산은 테마 전환 버튼처럼 사용자가 누른 지점이 명확한 토글에 어울립니다. 버튼을 누른 자리에서 원이 번지듯 다음 테마로 넘어가면, 전환이 어디서 시작됐는지가 눈에 바로 보입니다.

08 의 정렬 미끄러짐은 가격순·인기순 정렬 목록이나 칸반 보드처럼 순서만 바뀌고 항목 자체는 그대로인 화면에 맞습니다. 카드가 사라졌다 다시 나타나는 대신 옛 자리에서 새 자리로 미끄러지면, 사용자가 어떤 카드가 어디로 이동했는지 눈으로 따라갈 수 있습니다.

관련 편과 무엇이 다른가 — 006·060·388

CSS 다크모드 토글 애니메이션 9종 — 한 줄 복붙으로 편은 색상 값 자체가 서서히 바뀌는 것이 핵심이고, DOM 요소가 서로 다른 두 자리를 오가며 짝지어지는 계산은 없습니다. 이 편은 반대로 요소의 위치·크기가 통째로 달라지는 두 상태를 스냅샷으로 잇는 계산에 집중합니다.

CSS 이미지 슬라이드 애니메이션 9종 편의 전환은 transform·clip-path 값을 CSS 만으로 직접 트윈하는 방식이라, 다음 이미지가 어떤 값에서 시작해 어떤 값으로 끝나는지 작성자가 처음부터 끝까지 값을 다 정해 둬야 합니다. 이 편은 시작 값과 끝 값을 브라우저가 두 스냅샷에서 직접 읽어 가운데를 계산하므로, 작성자는 이름표 값만 맞추면 됩니다.

이미지 전환 효과 9종 — 캔버스 픽셀 계산으로 완성되는 리빌 편은 픽셀 데이터를 직접 읽고 써서 화면을 그리는 캔버스 계산이 핵심이라 DOM 요소 자체는 그대로입니다. 이 편은 캔버스를 전혀 쓰지 않고, 브라우저가 두 DOM 상태를 스냅샷으로 찍어 의사 요소 레이어로 겹쳐 보여주는 내장 기능만 씁니다 — 그 차이가 03 의 원형 확산과 388 편의 픽셀 리빌이 결과는 비슷해 보여도 계산 방식은 완전히 다른 이유입니다.

view transitions api examples 는 어디서 더 볼 수 있나?

이 페이지 맨 위 3×3 그리드에서 아홉 항목을 순서 없이 눌러 보며 비교할 수 있습니다. 코드를 항목별로 나눠 보고 싶다면 위의 01~09 섹션을 그대로 내려받아 프로젝트에 붙여 넣어도 되고, 전체를 한 번에 확인하고 싶다면 압축 파일 안의 index.html 아홉 개를 각각 열어 보는 편이 가장 빠릅니다.

자주 묻는 질문

view-transition-name 값을 아예 안 주면 어떻게 되나요?

기본값이 적용됩니다. 이 상태는 view transition name none 값과 같아서, 그 요소는 어떤 전환에도 짝지어지지 않고 부모 문서 스냅샷의 일부로만 함께 바뀝니다. 요소 하나를 다른 요소와 분리해 따로 애니메이션을 주고 싶을 때만 이름표 값을 명시적으로 붙이면 됩니다.

지원하지 않는 환경에서는 어떻게 보이나요?

지원 여부 값(SUPPORTS_VT)이 거짓으로 나오는 환경에서는 애니메이션 없이 다음 상태가 즉시 그려집니다. 07·09 항목처럼 조건문 하나로 갈라 두면 지원하지 않는 환경에서도 화면이 멈추거나 비지 않고 정상적으로 다음 내용을 보여줍니다.

전환 지속시간이나 감속 값은 어디서 바꾸나요?

이 데모에서는 demo-tokens.scss 의 $duration·$easing 같은 값을 바꾸면 전체 지속시간과 감속 곡선이 함께 바뀝니다. 05 처럼 요소군마다 다른 값을 주고 싶다면 view-transition-class 값으로 묶은 뒤 ::view-transition-group(.클래스) 규칙에서 따로 지정하면 됩니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.