css-view-transitions-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8">
<title>CSS View Transitions Module Level 1（日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">
<style>

._example-video {
	display: block;
	width: 100%;
	max-height: 369px;
	height: auto;
	margin: 0;
	aspect-ratio: 1404/738
}

.side-by-side {
	colmun-width: 20em;
	column-count: 2;
	column-rule-width: 1em;
}


#_phases-diagram {
	overflow-x: auto;
}
#_phases-diagram button {
	min-width: 4em;
	white-space: nowrap;
}
#_vt-slide {
	display: flex;
}
#_vt-slide > div {
	padding: 0.3em;
}

._vt-box {
	font-size: 1.5em;
	border: solid thin var(--K-color);
	width: 8em;
	height: 8em;
	position: relative;
}

._vt-state1,
._vt-state2 {
	width: 5em;
	text-align: center;
	border-radius: 0.4em;
}
._vt-state1 {
	background: var(--G-color);
	color: var(--W-color);
	position: absolute;
	top: 0;
	left: 0;
}
._vt-state2 {
	background: var(--O-bg);
	color: var(--K-color);
	position: absolute;
	top: 5em;
	left: 3em;
}
._vt-comment {
	position: absolute;
	bottom: 0;
	right: 0.3em;
	font-size: 0.7em;
	color: var(--dim-color);
}

._vt-a1 {
	animation-name: _vt-a1;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
._vt-a2 {
	animation-name: _vt-a2;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes _vt-a1 {
	from {
		left: 0px;
		top: 0px;
		opacity: 1;
	}
	to {
		left: 3em;
		top: 5em;
		opacity: 0;
	}
}
@keyframes _vt-a2 {
	from {
		left: 0px;
		top: 0px;
		opacity: 0;
	}
	to {
		left: 3em;
		top: 5em;
		opacity: 1;
	}
}
</style>

<style id="_vt-phase_style">
._vt-phase:not(*[data-phases~="1"]){
	display: none;
}
</style>

<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>
const initPhaseSlide = () => {
	let current_phase = 1;
	const phase_min = 1;
	const phase_max = 9;

	const update_pahse = (pahse) => {
		E('_vt-phase_style').textContent = `
		._vt-phase:not(*[data-phases~="${pahse}"]){
			display: none;
		}`;
		E("_vt-buttons-prev").disabled = (pahse===phase_min);
		E("_vt-buttons-next").disabled = (pahse===phase_max);
	}
	update_pahse(1);

	E("_vt-buttons-prev").onclick = () => {
		if(current_phase === phase_min) { return; }
		current_phase--;
		update_pahse(current_phase);
	}
	E("_vt-buttons-next").onclick = () => {
		if(current_phase === phase_max) { return; }
		current_phase++;
		update_pahse(current_phase);
	}
}

Util.ready = function(){
	const source_data = {
		populate: () => {initPhaseSlide()},
		generate: expand
	};
	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	return this.html.replace(
		/%[\w\-~一-鿆あ-ん]+|`(.*?)([$@^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){
if(!indicator) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r': // ref
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 't': // typedef
	text = `&lt;${key}&gt;`;
	key = key.replace(/\s*\[.+/, '');
	break;
case 'p': // property
	break;
case 'ps': // pseudo-class
	text = `:${key}`;
	break;
case 'pe': // pseudo-element
	text = `::${key}`;
	break;
case 'l':
	text = `"<code class="literal">${text}</code>"`;
	break;
case 'm': // IDL member
	let n = text.indexOf('(');
	if(n > 0){
		key = text.slice(0, n);
		text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
	}
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
case 'issue':
	text = `課題 #${key}`;
	href = `~CSSissue/${key}`;
	break;
case 'dgm':
	return `<a id="_dgm-${key}"></a>`;
	break;
default:
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	}
}

return text;

	}
}
</script>

<script type="text/plain" id="_source_data">


●●options

spec_title:CSS View Transitions Module Level 1
spec_date:2025-03-23
trans_update:2025-03-21
source_checked:240409
page_state_key:CSS
original_url:https://drafts.csswg.org/css-view-transitions-1/
	abbr_url:CSSVT
spec_status:ED
ref_id_prefix:biblio-
ref_id_lowercase:true
site_nav:css-anim,css
conformance:css
copyright:2025,permissive
trans_1st_pub:2023-07-28


●●class_map
p:property
ps:pseudo
pe:pseudo
t:type
css:css
f:func
v:value
et:event-type
e:element
E:error
jv:js-value

●●tag_map
p:code
pe:code
ps:code
t:var
css:code
f:code
d:code
et:code
e:code
I:code
m:code
mb:code
E:code
v:code
jv:code
c:code
V:var
em:em
i:i
cite:cite

●●original_id_map

●●mdn_urls
view-transitions:API/View_Transitions_API
viewtransition:API/ViewTransition
dom-document-startviewtransition:API/Document/startViewTransition
dom-viewtransition-updatecallbackdone:API/ViewTransition/updateCallbackDone
dom-viewtransition-finished:API/ViewTransition/finished
dom-viewtransition-ready:API/ViewTransition/ready
dom-viewtransition-skiptransition:API/ViewTransition/skipTransition
propdef-view-transition-name:CSS/view-transition-name
selectordef-view-transition:CSS/::view-transition
selectordef-view-transition-group:CSS/::view-transition-group
selectordef-view-transition-image-pair:CSS/::view-transition-image-pair
selectordef-view-transition-new:CSS/::view-transition-new
selectordef-view-transition-old:CSS/::view-transition-old

●●link_map


	●IDL
Exposed:~WEBIDLjs#Exposed

E.AbortError:~WEBIDL#aborterror
E.InvalidStateError:~WEBIDL#invalidstateerror
E.TimeoutError:~WEBIDL#timeouterror

any:~WEBIDL#idl-any
undefined:~WEBIDL#idl-undefined
unrestricted double:~WEBIDL#idl-unrestricted-double
c.unrestricted double:~WEBIDL#idl-unrestricted-double
Promise:~WEBIDL#idl-promise
~promise:~WEBIDL#idl-promise

I.ViewTransitionUpdateCallback:#callbackdef-viewtransitionupdatecallback
V.updateCallback:#callbackdef-viewtransitionupdatecallback
I.ViewTransition:#viewtransition
V.viewTransition:#viewtransition
I.IntersectionObserver:~INTERSECTIONOBSERVER#intersectionobserver
I.CSSKeyframesRule:~CSSANIM#csskeyframesrule
I.CSSStyleRule:~CSSOM1#cssstylerule
I.DOMException:~WEBIDL#idl-DOMException
I.Document:~DOM4#document
I.Element:~DOM4#element
I.NavigateEvent:~HTMLnavAPI#navigateevent

m.startViewTransition:#dom-document-startviewtransition
	%:updateCallback:#dom-document-startviewtransition-updatecallback-updatecallback
m.updateCallbackDone:#dom-viewtransition-updatecallbackdone
m.ready:#dom-viewtransition-ready
m.finished:#dom-viewtransition-finished
m.skipTransition:#dom-viewtransition-skiptransition
m.height:~GEOMETRY#dom-domrect-height
m.width:~GEOMETRY#dom-domrect-width
m.signal:~HTMLnavAPI#dom-navigateevent-signal

	●CSS/code

p.backdrop-filter:https://drafts.fxtf.org/filter-effects-2/#propdef-backdrop-filter
p.clip-path:~MASKING1#propdef-clip-path
p.color-scheme:~CSSCOLORADJUST#propdef-color-scheme
p.direction:~CSSWM#propdef-direction
p.filter:~FILTERS#propdef-filter
p.height:~SIZING#propdef-height
p.isolation:~COMPOSITING#propdef-isolation
p.mix-blend-mode:~COMPOSITING#propdef-mix-blend-mode
p.opacity:~CSSCOLOR#propdef-opacity
p.overflow:~CSSOVERFLOW3#propdef-overflow
p.pointer-events:~CSSUI#propdef-pointer-events
p.text-orientation:~CSSWM#propdef-text-orientation
p.transform:~TRANSFORM#propdef-transform
p.view-transition-name:#propdef-view-transition-name
p.visibility:~CSSDISP#propdef-visibility
p.width:~SIZING#propdef-width
p.writing-mode:~CSSWM#propdef-writing-mode

pe.view-transition-group():#selectordef-view-transition-group
pe.view-transition-image-pair():#selectordef-view-transition-image-pair
pe.view-transition-new():#selectordef-view-transition-new
pe.view-transition-old():#selectordef-view-transition-old
pe.view-transition:#selectordef-view-transition

ps.only-child:~SELECTORS4#only-child-pseudo
ps.root:~SELECTORS4#root-pseudo

t.custom-ident:~CSSVAL#identifier-value
	t.custom-ident:#valdef-view-transition-name-custom-ident
t.pt-name-selector:#typedef-pt-name-selector
t.transform-function:~TRANSFORM2#typedef-transform-function
t.blend-mode:~COMPOSITING#ltblendmodegt

v.none:#valdef-view-transition-name-none
v.plus-lighter:~COMPOSITING#plus-lighter

et.unhandledrejection:~HTMLindex#event-unhandledrejection

	●用語
~view遷移:#view-transitions
~view遷移~名:#view-transition-name
文書~視野な~view遷移~名:#document-scoped-view-transition-name
疑似要素~tree:#pseudo-element-tree
疑似要素~根:#pseudo-element-root
~view遷移~tree:#view-transition-tree
~view遷移~疑似要素:#view-transition-pseudo-elements
有名~view遷移~疑似要素:#named-view-transition-pseudo-elements

~snapshot包含塊:#snapshot-containing-block
~snapshot包含塊の原点:#snapshot-containing-block-origin
~snapshot包含塊の~size:#snapshot-containing-block-size
~view遷移~層:#view-transition-layer
大域的な~view遷移~UA~stylesheet:#global-view-transition-user-agent-style-sheet

vT.有名~要素~群:#viewtransition-named-elements
vT.相:#viewtransition-phase
vT.更新~callback:#viewtransition-update-callback
vT.準備済み時の~promise:#viewtransition-ready-promise
vT.更新~callback済み時の~promise:#viewtransition-update-callback-done-promise
vT.完遂-時の~promise:#viewtransition-finished-promise
vT.遷移~根~疑似要素:#viewtransition-transition-root-pseudo-element
vT.初期~snapshot包含塊~size:#viewtransition-initial-snapshot-containing-block-size

i.捕捉-待ち:#_pending-capture
i.更新~callbackは~call済み:#_update-callback-called
i.~animate中:#_animating
i.済み:#_done

doc.作動中な~view遷移:#document-active-view-transition
doc.~view遷移~用の描画を抑止するか:#document-rendering-suppression-for-view-transitions
doc.動的な~view遷移~stylesheet:#document-dynamic-view-transition-style-sheet
doc.~view遷移~treeを示すか:#document-show-view-transition-tree
doc.更新~callback~queue:#document-update-callback-queue

el.ある~view遷移~内に捕捉されたか:#captured-in-a-view-transition

捕捉された要素:#captured-element
cE.旧-画像:#captured-element-old-image
cE.旧-横幅:#captured-element-old-width
cE.旧-縦幅:#captured-element-old-height
cE.旧-変形:#captured-element-old-transform
cE.旧-書字~mode:#captured-element-old-writing-mode
cE.旧-方向:#captured-element-old-direction
cE.旧-~text方位:#captured-element-old-text-orientation
cE.旧-混色~mode:#captured-element-old-mix-blend-mode
cE.旧-後景~filter:#captured-element-old-backdrop-filter
cE.旧-色~scheme:#captured-element-old-color-scheme
cE.新-要素:#captured-element-new-element
cE.~style定義~群:#captured-element-style-definitions
cE.~group~keyframe群:#captured-element-group-keyframes
cE.~group~animation名~規則:#captured-element-group-animation-name-rule
cE.~group~style規則:#captured-element-group-styles-rule
cE.画像~pair隔離~規則:#captured-element-image-pair-isolation-rule
cE.画像~animation名~規則:#captured-element-image-animation-name-rule

処理待ち遷移~演算を遂行する:#perform-pending-transition-operations
~view遷移を設定しておく:#setup-view-transition
~view遷移を作動化する:#activate-view-transition
旧-状態を捕捉する:#capture-the-old-state
新-状態を捕捉する:#capture-the-new-state
遷移~疑似要素たちを設定しておく:#setup-transition-pseudo-elements
更新~callbackを~scheduleする:#schedule-the-update-callback
更新~callback~queueを一掃する:#flush-the-update-callback-queue
更新~callbackを~callする:#call-the-update-callback
~view遷移を飛ばす:#skip-the-view-transition
飛ばされ:#skip-the-view-transition
~view遷移の~page可視性~変化-時の手続き:#view-transition-page-visibility-change-steps
画像を捕捉する:#capture-the-image
描画~特性を捕捉する:#capture-rendering-characteristics
遷移~frameを取扱う:#handle-transition-frame
疑似要素~styleを更新する:#update-pseudo-element-styles
~view遷移を~clearする:#clear-view-transition

	●用語（CSS
~stylesheet:~CSSSNAPSHOT#style-sheet
~UA出自:~CASCADE#cascade-origin-ua
算出d値:~CASCADE#computed-value

選択子:~SELECTORS4#selector
型~選択子:~SELECTORS4#type-selector
詳細度:~SELECTORS4#specificity
関数形~疑似要素:~SELECTORS4#functional-pseudo-element
疑似要素:~SELECTORS4#pseudo-element
	疑似要素:~TR/CSS21/selector.html#x22
出自の要素:~SELECTORS4#originating-element
出自の疑似要素:~SELECTORS4#originating-pseudo-element
最終的な出自の要素:~SELECTORS4#ultimate-originating-element

平坦~tree:~CSSSCOPING#flat-tree
~tree文脈:~CSSSCOPING#tree-context
~tree視野な名前:~CSSSCOPING#css-tree-scoped-name

~treeに留まる疑似要素:~CSSPSEUDO#tree-abiding


~animation:~WANIM#concept-animation
離散的:~WANIM#discrete
時列線:~WANIM#timeline
An.時列線:~WANIM#_animation-timeline
結付けられた効果:~WANIM#animation-associated-effect
文書~時列線:~WANIM#document-timeline
	属する時列線:~WANIM#timeline-associated-with-a-document
効果~target:~WANIM#keyframe-effect-effect-target
i.静止中:~WANIM#play-state-paused
i.稼働中:~WANIM#play-state-running
処理待ち~animation~event~queue:~WANIM#pending-animation-event-queue
再生-状態:~WANIM#animation-play-state
対応する~event~target:~WANIM#_event-target

~scroll駆動な~animation:~SCROLL-ANIM#scroll-driven-animations

首要~box:~CSSDISP#principal-box
行内~box:~CSSDISP#inline-box
	~TR/CSS2/visuren.html#inline-boxes
要素:#_element
	要素:~CSSDISP#elements
	要素:https://drafts.csswg.org/css2/#element
包含塊:~CSSDISP#containing-block
初期~包含塊:~CSSDISP#initial-containing-block
置換され:~CSSDISP#replaced-element
置換d要素:~CSSDISP#replaced-element
根~要素:~CSSDISP#root-element

行l~box:~CSSINLINE#line-box
	~TR/CSS2/visuren.html#line-box

~border~box:~CSSBOX#border-box
内容~box:~CSSBOX#content-box

~box断片:~CSSBREAK#box-fragment
断片化され:~CSSBREAK#fragment

~size:~SIZING#size

恒等~変形-関数:~TRANSFORM#identity-transform-function

~canvas背景:~CSSBG#canvas-background
~ink~overflow区画:~CSSOVERFLOW3#ink-overflow-region
~ink~overflow矩形:~CSSOVERFLOW3#ink-overflow-rectangle
~ink~overflow:~CSSOVERFLOW3#ink-overflow
~scrollbar側溝:~CSSOVERFLOW3#scrollbar-gutter

生来な寸法:~CSSIMAGE#natural-dimensions
生来な~size:~CSSIMAGE#natural-size
描画され:~CSSIMAGE4#element-not-rendered

内容を飛ばす:~CSSCONTAIN#skips-its-contents
	飛ばされ:~CSSCONTAIN#skips-its-contents
要素~内容:~CSSCONTAIN#element-contents

上端~層:~CSSPOS4#document-top-layer
塗り順序:~CSSPOS4#painting-order
	塗り順序:~CSSWG/css2/#painting-order
絶対~位置決め包含塊:~CSSPOS#absolute-positioning-containing-block
固定d位置決め包含塊:~CSSPOS#fixed-positioning-containing-block
固定的に位置され:~CSSPOS#fixed-position


~layout表示域:~CSSOMVIEW#layout-viewport
~scrollされる~box:~CSSOMVIEW#scrolling-box

積層~文脈:~CSS2J#stacking-context
表示域:~CSS2J#viewport

	●用語（他
実装定義:~INFRA#implementation-defined
~list:~INFRA#list
空にする:~INFRA#list-empty
付加する:~INFRA#list-append
集合:~INFRA#ordered-set
set.付加する:~INFRA#set-append
有順序~map:~INFRA#ordered-map
map.値~群:~INFRA#map-getting-the-values
構造体:~INFRA#struct
~tuple:~INFRA#tuple
	map.~EACH:~INFRA#map-iterate
	包含-:~INFRA#list-contain
	~Assert:~INFRA#assert
	~CONTINUE:~INFRA#iteration-continue
	~EACH:~INFRA#list-iterate
	~NEQ ε:~INFRA#map-exists


新たな~obj:~WEBIDLjs#new
~callback関数を呼出す:~WEBIDLjs#invoke-a-callback-function
~method手続き:~WEBIDL#method-steps
取得子~手続き:~WEBIDL#getter-steps
~promiseに反応する:~WEBIDLjs#dfn-perform-steps-once-promise-is-settled
~promiseを却下する:~WEBIDLjs#reject
~promiseを取扱済みとして~markする:~WEBIDLjs#mark-a-promise-as-handled
取扱済みとして~markされ:~WEBIDLjs#mark-a-promise-as-handled
~promiseを解決する:~WEBIDLjs#resolve
新たな~promise:~WEBIDLjs#a-new-promise
解決される~promise:~WEBIDLjs#a-promise-resolved-with
	コレ:~WEBIDL#this
eX.名前:~WEBIDL#domexception-name
例外:~WEBIDL#dfn-exception


~tree:~DOM4#concept-tree
関与-:~DOM4#concept-tree-participate
根:~DOM4#concept-tree-root
親:~DOM4#concept-tree-parent
子:~DOM4#concept-tree-child
同胞:~DOM4#concept-tree-sibling
子孫:~DOM4#concept-tree-descendant
広義-子孫:~DOM4#concept-tree-inclusive-descendant
~shadowも含めた子孫:~DOM4#concept-shadow-including-descendant
接続されて:~DOM4#connected
文書:~DOM4#concept-document
文書~要素:~DOM4#document-element
~node文書:~DOM4#concept-node-document

並列的:~HTMLINFRA#in-parallel
doc.可視性~状態:~HTMLinteraction#visibility-state
結付けられた文書:~WINDOW#concept-document-window
子~navigable:~HTMLds#child-navigable
~DOM操作~task~source:~WAPI#dom-manipulation-task-source
大域~taskを~queueする:~WAPI#queue-a-global-task
関連な~realm:~WAPI#concept-relevant-realm
関連な大域~obj:~WAPI#concept-relevant-global
関連な設定群~obj:~WAPI#relevant-settings-object

所要時間:~HRTIME#dfn-duration

●●words_table1
SCROLL-ANIM:https://drafts.csswg.org/scroll-animations-1/

●●words_table


	●遷移／animation
新-:new:~
旧-:old:~
捕捉-:capture::~
捕捉:capture::~
静止-:pause::~
滑らか:smooth:~
共存-:co-exist:~
keyframe:
静止中:paused::~
稼働中:running::~
再生-:play::~
	~animateして:animating
	~animation:animating
	~view遷移:view-transition

	●塗り
積層:stacking::~
塗ng:painting:塗り
塗り:paint:~
塗る:paintする:~
塗られ:paintされ:~
ink:
切取られ:clipされ::切り取られ
切取っ:clipし::切り取っ
切取り:clipping::切り取り
cross-fade::::クロスフェード
覆う:coverする:~
縦横比:aspect ratio::~
raster::::ラスター
	~raster化:rasterization
品質:quality:~
後景:backdrop::~
	後景:back-drop
横:horizontal::~
縦:vertical::~
見かけ:look:~
描く:drawする:~
強調-:highlight:~
	視覚-化:visualization
3D:
2D:
混色:blend::~
混色-:blend::~
bitmap::::ビットマップ

	層を重ねる:layer on top of one another
	層の重ね方:layering
	縮小-:downscale
	上層:on top of

	●layout
首要:principal::主要
固定d:fixed::固定
固定的:fixed::~
限界域:bounds:~
隅:corner:~
矩形:rectangle:~
部位:portion:~
側溝:gutter::~

	●UI／呈示
UX:
sidebar::::サイドバー
接触判定:hit-testing::~
desktop::::デスクトップ
mobile::::モバイル
virtual-keyboard::::ソフトウエアキーボード
示す:showする:~
示して:showして:~
浮動-:float:~
素早く:quickに:~
遅く:slowに:~
	より遅く:slower
motion::::モーション
露呈-:reveal:露わに
支援技術:assistive technology:~
非可視:hidden:~

	遠くへ:away
	消えたり:disappear
	現れる:appearする
	現れな:appearしな
	“戻る” :back
	“新-” 状態が円形に広がる:create a circular reveal from
	~scrollbar:scroll bar
	離れて:away
	近い:close
	から外れた:out-of-

	●CSS
選択-:select::~
詳細度:specificity::~
書字:writing::~
変形:transform::~
変形-:transform::~
出自の:originating::~
出自:origin::~
出自-:originateする:出自に
生来:natural::~
関数形:functional:~
恒等:identity::~
実数:number:~

	●処理
取扱済み:handled:取り扱い済み
schedule::::スケジュール
決着-:settle::~
切替えて:switchして:切り替えて
瞬時:instantaneous:~
処理待ち:pending:~
相:phase::~::フェーズ
lifecycle:
制限時間:timeout::~
片付けら:clean upさ:~
時機:timing:~
一掃-:flush::~

	%~view遷移:viewTransition
	%~view遷移:-
	%疑似要素:pseudo
	%遷移:transition
	%文書:document
	%捕捉された要素:capturedElement
	%新-要素:capturedElement
	%捕捉~要素~群:captureElements
	%有名~要素~群:namedElements
	%遷移~名~群:usedTransitionNames
	%遷移~名:transitionName
	%捕捉:capture
	%元の矩形:originalRect
	%~group:group
	%画像~pair:imagePair
	%旧-:old
	%新-:new
	%新-矩形:newRect
	%変形:transform
	%横幅:width
	%縦幅:height
	%~callback~promise:callbackPromise
	%事由:reason
	%作動中な~animationはあるか:hasActiveAnimations
	%書字~mode:writingMode
	%方向:direction
	%~text方位:textOrientation
	%混色~mode:mixBlendMode
	%成否:-
	%結果:-
	%~animation群:-
	%~event:-
	%混色~mode:mixBlendMode
	%後景~filter:backdropFilter
	%色~scheme:colorScheme
	%充足-手続き:fulfillSteps
	%却下-手続き:rejectSteps
	%視野~付き~view遷移~名:scopedViewTransitionName

	何もしない:no-op
	静止されなく:unpause
	設定しておく:set up
	補間-可能:interpolatable
	開始~時の:starting
	終了~時の:ending
	逆順に:out of sequence
	期間:period
	しつつ:about to
	時点:point
	途中:in between
	始まり:begin
	始まる:begin
	同時に:simultaneously
	同時に:at the same time
	時点:at the time
	〜間は:at any time
	経ていく:goes through
	読み戻される:read back

	●保安
	●仕様
厄介:troublesome:~
規定-:dictate:~
理想的:ideal:~
馴染み:familiar:~
正当化-:justify:~
説明的:explanatory:~
増補:enhancement:~
心配-:worry:~
準拠-:comply:~
	準拠する:compliant
全体的:holistic:~
	より全体的に捉える:has a more holistic view
保つ:keepする:~
誤記:typo:~
実現可能:feasible:~
譲歩-:compromise:~
参照r:refer:参照
export:
尊重-:respect:~
利用度:usage:~

	要点:key part
	より高い~levelでは:at a higher level
	紛らわしくもなり得る:may be confusing
	必要yでない:not necessarily
	~view遷移^cite:View Transition
	選べる:chooseでき
	譲歩させられ:compromiseされ
	織り込む:account for
	事実:in fact,
	誤った環境設定:misconfiguration
	事前に判明した:it’s known in advance
	委ねる:left to
	だけ:alone
	まず:firstly
	真中:middle
	最も遠い:furthest
	前と同じ:the previous
	~custom化できる:customizations can be made
	通常でない:non-normal
	〜な限り:insofar as
	所までを除いて:insofar as
	ようになり得る:potentially
	すべて:everything
	左上:top left
	ときもある:sometimes
	問われない:does not matter
	場合もある:may
	はず:should
	あったとする:Taking 〜 already
	と称される:known as
	されないようにする／されなくなる:prevent
	判明した:it’s known
	上の例に引き続き、Building on the previous example
	担当しない:not responsible
	〜より〜見込みが高く:makes it likely to be
	~~再構成:refactor
	が:despite
	事例によっては:not 〜 for all cases
	~~正しいとは言えない:not right
	~level 1:L1
	入れ替えた:swap

	●言い換え
	`文書$:Document
	`捕捉-待ち$i:"pending-capture"
	`更新~callbackは~call済み$i:"update-callback-called"
	`~animate中$i:"animating"
	`済み$i:"done"

	いつ:timing
	0.25 秒間の:quarter-second
	伴われる:featuring
	-:type
	~sidebarが内へ来る:entry
	~sidebarが外へ出る:exit
	全体の:things
	遷移-中な:transitional
	文書~要素:documentElement
	ヤリトリ-可能:interactive
	疑似要素~tree:pseudo-tree
	疑似要素:pseudo
	~style法:styling
	常に:not prevent
	その後:then
	決着するに伴い決着する:fulfill or reject along with
	~tag付け:tagging
	~textは変わらない:identical text
	上の例に引き続き、:Building on the previous example
	上の例から~~改めて、:Not building from previous examples this time
	先立つ:earlier
	~HTML:html
	重複している:duplicate
	重複して発火-:duplicate
	重複して発火-:provide 〜 duplicate
	発火させ:cause
	がその根になる:under a rooted
	^en:incoming
	^en:jump:#1
	^en:retarget:#1
	^en:texture read back in
	$v:plus-lighter
	^p:content-visibility
	~~保つ:stay
	併せた領域:union of 〜 with
	でも〜利用者~体験は壊れないよう:avoid a broken experience
	効率を高める:efficiency
	pull:PR

	●未分類
main::::メイン
集成:consolidation:~
構成-:compose:~
循環依存:circular dependency:~
広義-:inclusive:~
超過-:exceed:~
余分:extra:~
component::::コンポーネント
映出す:mirrorする:映し出す
スマホ:phone:::~
付され:attachされ:~
実体:entity:~
再現-:replicate:~
外方:outbound::~::アウトバウンド
先行-:preceed:~
入口:entry:~
出口:exit:~
clean:
視野な:scopedな::~
	視野な:-scoped
	視野が絞られ:scoped to
	視野~付き:scoped
	視野~法:scoping

	~NULL 可能:nullable
	最終的:ultimate
	対応-:correspond
	含め:including
	含む:include
	含まな:includeしな
	起こ:happen
	起き:happen
	~~保ちながら:without breaking
	残り:the rest
	無い:absent
	指す／指して:refer
	内／外:in or out
	の外:out of
	~page全般:page-wide
	〜周り:around
	の下に:beneath 〜
	奥にある:beneath
	奥にある:underneath
	少なくとも:at the very least
	広い:large
	~pairにされ:paired
	十分:enough
	結局は〜になった:ends up becoming
	低-:low-


●●images
＠css-view-transitions/
phone-browser｜height:21em｜｜.svg
phone-browser-snapshot-root｜height:21em｜｜.svg
desktop-browser｜height:279px｜｜.svg
desktop-browser-snapshot-root｜height:279px｜｜.svg
phone-browser-with-url｜height:297px｜｜.svg
phone-browser-without-url｜height:297px｜｜.svg
phone-browser-scrolled-to-top-with-url｜height:297px｜｜.svg
phone-browser-scrolled-to-top-without-url｜height:297px｜｜.svg


●●ref_normative

[COMPOSITING-2]
    ＜Compositing and Blending Level 2＞. Editor's Draft. URL: https://drafts.fxtf.org/compositing-2/
[CSS-2022]
    Tab Atkins Jr.; Elika Etemad; Florian Rivoal. ＜CSS Snapshot 2022＞. URL: https://drafts.csswg.org/css-2022/
[CSS-ANIMATIONS-1]
    David Baron; et al. ＜CSS Animations Level 1＞. URL: https://drafts.csswg.org/css-animations/
[CSS-BACKGROUNDS-3]
    Elika Etemad; Brad Kemper. ＜CSS Backgrounds and Borders Module Level 3＞. URL: https://drafts.csswg.org/css-backgrounds/
[CSS-BOX-4]
    Elika Etemad. ＜CSS Box Model Module Level 4＞. URL: https://drafts.csswg.org/css-box-4/
[CSS-BREAK-4]
    Rossen Atanassov; Elika Etemad. ＜CSS Fragmentation Module Level 4＞. URL: https://drafts.csswg.org/css-break-4/
[CSS-CASCADE-5]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 5＞. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-COLOR-4]
    Chris Lilley; Tab Atkins Jr.; Lea Verou. ＜CSS Color Module Level 4＞. URL: https://drafts.csswg.org/css-color-4/
[CSS-COLOR-ADJUST-1]
    Elika Etemad; et al. ＜CSS Color Adjustment Module Level 1＞. URL: https://drafts.csswg.org/css-color-adjust-1/
[CSS-CONTAIN-2]
    Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. ＜CSS Containment Module Level 2＞. URL: https://drafts.csswg.org/css-contain-2/
[CSS-DISPLAY-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 3＞. URL: https://drafts.csswg.org/css-display/
[CSS-DISPLAY-4]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 4＞. URL: https://drafts.csswg.org/css-display/
[CSS-IMAGES-3]
    Tab Atkins Jr.; Elika Etemad; Lea Verou. ＜CSS Images Module Level 3＞. URL: https://drafts.csswg.org/css-images-3/
[CSS-IMAGES-4]
    Tab Atkins Jr.; Elika Etemad; Lea Verou. ＜CSS Images Module Level 4＞. URL: https://drafts.csswg.org/css-images-4/
[CSS-MASKING-1]
    Dirk Schulze; Brian Birtles; Tab Atkins Jr.. ＜CSS Masking Module Level 1＞. URL: https://drafts.fxtf.org/css-masking-1/
[CSS-OVERFLOW-3]
    Elika Etemad; Florian Rivoal. ＜CSS Overflow Module Level 3＞. URL: https://drafts.csswg.org/css-overflow-3/
[CSS-POSITION-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Positioned Layout Module Level 3＞. URL: https://drafts.csswg.org/css-position-3/
[CSS-POSITION-4]
    ＜CSS Positioned Layout Module Level 4＞. Editor's Draft. URL: https://drafts.csswg.org/css-position-4/
[CSS-PSEUDO-4]
    Daniel Glazman; Elika Etemad; Alan Stearns. ＜CSS Pseudo-Elements Module Level 4＞. URL: https://drafts.csswg.org/css-pseudo-4/
[CSS-SCOPING-1]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Scoping Module Level 1＞. URL: https://drafts.csswg.org/css-scoping/
[CSS-TRANSFORMS-1]
    Simon Fraser; et al. ＜CSS Transforms Module Level 1＞. URL: https://drafts.csswg.org/css-transforms/
[CSS-TRANSFORMS-2]
    Tab Atkins Jr.; et al. ＜CSS Transforms Module Level 2＞. URL: https://drafts.csswg.org/css-transforms-2/
[CSS-UI-4]
    Florian Rivoal. ＜CSS Basic User Interface Module Level 4＞. URL: https://drafts.csswg.org/css-ui-4/
[CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/
[CSS-VIEWPORT-1]
    Florian Rivoal; Emilio Cobos Álvarez. ＜CSS Viewport Module Level 1＞. URL: https://drafts.csswg.org/css-viewport/
[CSS-WRITING-MODES-3]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 3＞. URL: https://drafts.csswg.org/css-writing-modes-3/
[CSS-WRITING-MODES-4]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 4＞. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS2]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
[CSSOM-1]
    Daniel Glazman; Emilio Cobos Álvarez. ＜CSS Object Model (CSSOM)＞. URL: https://drafts.csswg.org/cssom/
[CSSOM-VIEW-1]
    Simon Pieters. ＜CSSOM View Module＞. URL: https://drafts.csswg.org/cssom-view/
[DOM]
    Anne van Kesteren. ＜DOM Standard＞. Living Standard. URL: https://dom.spec.whatwg.org/
[FILTER-EFFECTS-1]
    Dirk Schulze; Dean Jackson. ＜Filter Effects Module Level 1＞. URL: https://drafts.fxtf.org/filter-effects-1/
[FILTER-EFFECTS-2]
    ＜Filter Effects Module Level 2＞. Editor's Draft. URL: https://drafts.fxtf.org/filter-effects-2/
[GEOMETRY-1]
    Simon Pieters; Chris Harrelson. ＜Geometry Interfaces Module Level 1＞. URL: https://drafts.fxtf.org/geometry/
[HR-TIME-3]
    Yoav Weiss. ＜High Resolution Time＞. URL: https://w3c.github.io/hr-time/
[HTML]
    Anne van Kesteren; et al. ＜HTML Standard＞. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
    Anne van Kesteren; Domenic Denicola. ＜Infra Standard＞. Living Standard. URL: https://infra.spec.whatwg.org/
[INTERSECTION-OBSERVER]
    Stefan Zager; Emilio Cobos Álvarez; Traian Captan. ＜Intersection Observer＞. URL: https://w3c.github.io/IntersectionObserver/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SELECTORS-3]
    Tantek Çelik; et al. ＜Selectors Level 3＞. URL: https://drafts.csswg.org/selectors-3/
[SELECTORS-4]
    Elika Etemad; Tab Atkins Jr.. ＜Selectors Level 4＞. URL: https://drafts.csswg.org/selectors/
[WEB-ANIMATIONS-1]
    Brian Birtles; et al. ＜Web Animations＞. URL: https://drafts.csswg.org/web-animations-1/
[WEBIDL]
    Edgar Chen; Timothy Gu. ＜Web IDL Standard＞. Living Standard. URL: https://webidl.spec.whatwg.org/

●●ref_informative

[CSS-SIZING-3]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Box Sizing Module Level 3＞. URL: https://drafts.csswg.org/css-sizing-3/
[POINTEREVENTS3]
    Patrick Lauke; Robert Flack. ＜Pointer Events＞. URL: https://w3c.github.io/pointerevents/
[SCROLL-ANIMATIONS-1]
    Brian Birtles; et al. ＜Scroll-driven Animations＞. URL: https://drafts.csswg.org/scroll-animations-1/


●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">CSS View Transitions Module Level 1</a>
を日本語に翻訳したものです。
~PUB
</p>


●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/css-view-transitions-1/
公表履歴
	https://www.w3.org/standards/history/css-view-transitions-1/
実装報告
	https://wpt.fyi/results/css/css-view-transitions
フィードバック
	https://github.com/w3c/csswg-drafts/labels/css-view-transitions-1
編集
	<a href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (Google)
	Jake Archibald (Google)
	Khushal Sagar (Google)
Suggest an Edit for this Spec
	<a href="https://github.com/w3c/csswg-drafts/blob/main/css-view-transitions-1/Overview.bs">GitHub Editor</a>
commit 履歴
	https://github.com/w3c/csswg-drafts/commits/main/css-view-transitions-1
</script>

</head>
<body>
<template id="_persisted_parts">
<video
	id="_dgm-video-default"
	class="_example-video"
	controls loop muted playsinline
	preload="none"
	src="https://drafts.csswg.org/css-view-transitions-1/diagrams/videos/default.mp4"
></video>

<video
	id="_dgm-video-slow"
	class="_example-video"
	controls loop muted playsinline
	preload="none"
	src="https://drafts.csswg.org/css-view-transitions-1/diagrams/videos/slow.mp4"
></video>

<video
	id="_dgm-video-slide"
	class="_example-video"
	controls loop muted playsinline
	preload="none"
	src="https://drafts.csswg.org/css-view-transitions-1/diagrams/videos/slide.mp4"
></video>

<video
	id="_dgm-video-header"
	class="_example-video"
	controls loop muted playsinline
	preload="none"
	src="https://drafts.csswg.org/css-view-transitions-1/diagrams/videos/header.mp4"
></video>

<video
	id="_dgm-video-bad-sidebar"
	class="_example-video"
	controls loop muted playsinline
	preload="none"
	src="https://drafts.csswg.org/css-view-transitions-1/diagrams/videos/bad-sidebar.mp4"
></video>

<video
	id="_dgm-video-good-sidebar"
	class="_example-video"
	controls loop muted playsinline
	preload="none"
	src="https://drafts.csswg.org/css-view-transitions-1/diagrams/videos/good-sidebar.mp4"
></video>

<video
	id="_dgm-video-circle"
	class="_example-video"
	controls loop muted playsinline
	preload="none"
	src="https://drafts.csswg.org/css-view-transitions-1/diagrams/videos/circle.mp4"
></video>
</template>

<header>
	<hgroup>
<h1>CSS ビュー遷移 — CSS View Transitions Module Level 1</h1>
	</hgroup>
</header>

<div id="MAIN" hidden>
	<section id="abstract">
◎要約

<p>
この~moduleは、
`~view遷移^cite（ `View Transition^en ）~API,
それに結付けられる各種［
~prop, 疑似要素
］を定義する。
それは、
`~view遷移$
— 文書~状態における変化を~animateされる視覚的な遷移として表現するもの —
を作成することを開発者に許容する。
◎
This module defines the View Transition API, along with associated properties and pseudo-elements, which allows developers to create animated visual transitions representing changes in the document state.
</p>

~CSSisaLANG

	</section>
	<section id="sotd">
◎位置付け

<p>
これは、
編集者草案の公な複製です…
【以下、この節の内容は，~SOTD-CSSに移譲。】
</p>

	</section>

<main id="MAIN0">

	<section id="intro">
<h2 title="Introduction">1. 序論</h2>

◎非規範的

<p>
この仕様は、
ある~DOM~API, それに結付けられる~CSS特能を導入する。
それは、
`~view遷移@
（ `view transition^en ）と呼ばれる［
`文書$を成す ある状態から異なる状態へ~animateされる視覚的な遷移
］を作成することを開発者に許容する。
◎
This specification introduces a DOM API and associated CSS features that allow developers to create animated visual transitions, called view transitions between different states of a document.
</p>

		<section id="separating-transitions">
<h3 title="Separating Visual Transitions from DOM Updates">1.1. ~DOM更新と視覚的な遷移の分離-法</h3>

<p>
伝統的に，
2 つの文書~状態の間で視覚的な遷移を作成することには、
~DOMにおいて両~状態が同時に在るような期間が要求されていた。
事実，それは、
通例的には，両~状態を表現し得る特有な~DOM構造を作成することを孕んでいた。
例えば，ある要素が容器から容器へ “移動する” 場合、
要素は，当の遷移を成す期間において［
どちらかの容器 または それらの先祖~要素【の限界域】で切取られるのを避ける
］ため［
両~容器の外側に存在する必要がある
］ことが多い。
◎
Traditionally, creating a visual transition between two document states required a period where both states were present in the DOM at the same time. In fact, it usually involved creating a specific DOM structure that could represent both states. For example, if one element was “moving” between containers, that element often needed to exist outside of either container for the period of the transition, to avoid clipping from either container or their ancestor elements.
</p>

<p>
この余分な途中-状態は、
~UXと~accessibilityの課題になることが多い
— ~DOMを成す構造が，純粋に視覚的な効果~用に譲歩させられるので。
◎
This extra in-between state often resulted in UX and accessibility issues, as the structure of the DOM was compromised for a purely-visual effect.
</p>

<p>
`~view遷移$は、
次を許容することにより，この厄介な途中-状態を避ける：
~DOMを 2 つの状態の間で瞬時に切替えてから、
別の層において 2 つの状態の間で［
旧-状態を成す静的な視覚的な捕捉,
新-状態を成す~liveな捕捉
］を利用して，~custom化~可能な視覚的な遷移を遂行することにより。
これらの捕捉は、
`疑似要素$たちが成す~treeとして表現される
（詳細は、
`§ ~view遷移~用の疑似要素＠#view-transition-pseudos$にて）
— それは、［
旧-, 新-
］両~視覚的な状態が共存するようにして，［
~size, 位置
］を旧-から新-へ~animateしている間に［
~cross-fadeするなどの効果
］を許容する。
◎
View Transitions avoid this troublesome in-between state by allowing the DOM to switch between states instantaneously, then performing a customizable visual transition between the two states in another layer, using a static visual capture of the old state, and a live capture of the new state. These captures are represented as a tree of pseudo-elements (detailed in § 3.2 View Transition Pseudo-elements), where the old visual state co-exists with the new state, allowing effects such as cross-fading while animating from the old to new size and position.
</p>

		</section>
		<section id="customizing">
<h3 title="View Transition Customization">1.2. ~view遷移の~custom化</h3>

<p>
`Document$I の `startViewTransition()$m は、
既定では，~page全般な`~view遷移$を作成する
— それは、
2 つの~DOM状態の間で~cross-fadeすることからなる。
開発者は、
`view-transition-name$p ~CSS~propを利用して，
どの要素が独立に捕捉されるかも選べる
— それは、
要素が~pageを成す残りとは独立に~animateされることを許容する。
遷移-中な状態
（そこでは、旧-, 新- 両~視覚的な捕捉が存在する）
は，疑似要素たちとして表現されるので、
開発者は，馴染みな特能
— `~CSS~animation＠~CSSANIM$cite, `~Web~animation＠~WANIM$cite など —
を利用して各~遷移を~custom化できる。
◎
By default, document.startViewTransition() creates a view transition consisting of a page-wide cross-fade between the two DOM states. Developers can also choose which elements are captured independently using the view-transition-name CSS property, allowing these to be animated independently of the rest of the page. Since the transitional state (where both old and new visual captures exist) is represented as pseudo-elements, developers can customize each transition using familiar features such as CSS Animations and Web Animations.
</p>

		</section>
		<section id="lifecycle">
<h3 title="View Transition Lifecycle">1.3. ~view遷移の~lifecycle</h3>

<p>
成功裡な`~view遷移$は、
順に，次に挙げる相を経ていく：
◎
A successful view transition goes through the following phases:
</p>
<ol>
	<li>
開発者は、
<code>document.`startViewTransition$m(`updateCallback$V)</code>
を~callする
— それは、
ある `ViewTransition$I %~view遷移 を返す。
◎
Developer calls document.startViewTransition(updateCallback), which returns a ViewTransition, viewTransition.
</li>
	<li>
現在の状態が “旧-” 状態として捕捉される。
◎
Current state captured as the “old” state.
</li>
	<li>
描画は静止される。
◎
Rendering paused.
</li>
	<li>
開発者から `updateCallback$V 関数が供された場合、
それが~callされる
— それが，文書~状態を更新する。
◎
Developer’s updateCallback function, if provided, is called, which updates the document state.
</li>
	<li>
%~view遷移 の `updateCallbackDone$m が充足される。
◎
viewTransition.updateCallbackDone fulfills.
</li>
	<li>
現在の状態が “新-” 状態 として捕捉される。
◎
Current state captured as the “new” state.
</li>
	<li>
遷移~疑似要素たちが作成される。
これらが成す構造の概観は、
`§ ~view遷移~用の疑似要素＠#view-transition-pseudos$
を見よ。
◎
Transition pseudo-elements created. See § 3.2 View Transition Pseudo-elements for an overview of this structure.
</li>
	<li>
描画は静止されなくなり，遷移~疑似要素が露呈される。
◎
Rendering unpaused, revealing the transition pseudo-elements.
</li>
	<li>
%~view遷移 の `ready$m が充足される。
◎
viewTransition.ready fulfills.
</li>
	<li>
完遂するまで，疑似要素たちを~animateする。
◎
Pseudo-elements animate until finished.
</li>
	<li>
遷移~疑似要素たちが除去される。
◎
Transition pseudo-elements removed.
</li>
	<li>
%~view遷移 の `finished$m が充足される。
◎
viewTransition.finished fulfills.
</li>
</ol>

<div id="_phases-diagram">
	<div id="_vt-slide">
		<div>
~main~DOM
			<div class="_vt-box">
<span class="_vt-phase _vt-state1" data-phases="1 2 3">状態 1</span>
<span class="_vt-phase _vt-state2" data-phases="4 5 6 7 8 9">状態 2</span>
			</div>
		</div>
		<div>
遷移~根
			<div class="_vt-box">
<span class="_vt-phase _vt-state1" data-phases="6 7">状態 1</span>
<span class="_vt-a1 _vt-phase _vt-state1" data-phases="8">状態 1</span>
<span class="_vt-a2 _vt-phase _vt-state2" data-phases="8">状態 2</span>
			</div>
		</div>
		<div>
利用者が見るもの
			<div class="_vt-box">
<span class="_vt-phase _vt-state1" data-phases="1 2 3 4 5 6 7">状態 1</span>
<span class="_vt-phase _vt-state2" data-phases="9">状態 2</span>
<span class="_vt-a1 _vt-phase _vt-state1" data-phases="8">状態 1</span>
<span class="_vt-a2 _vt-phase _vt-state2" data-phases="8">状態 2</span>
<div class="_vt-phase _vt-comment" data-phases="1 2">~main~DOM</div>
<div class="_vt-phase _vt-comment" data-phases="3 4 5 6">描画は静止される</div>
<div class="_vt-phase _vt-comment" data-phases="7 8">遷移~根</div>
<div class="_vt-phase _vt-comment" data-phases="9">~main~DOM</div>
			</div>
		</div>
	</div>
	<div>
<span class="_vt-phase" data-phases="1">1.
開発者は、 `document.startViewTransition()^c を~callする
【！Developer calls document.startViewTransition()】
</span>
<span class="_vt-phase" data-phases="2">2.
現在の状態が “旧-” 状態として捕捉される。
【！Current state captured as the "old" state】
</span>
<span class="_vt-phase" data-phases="3">3.
描画は静止される。
【！Rendering paused】
</span>
<span class="_vt-phase" data-phases="4">4.
開発者は文書~状態を更新する。
【！Developer updates document state】
</span>
<span class="_vt-phase" data-phases="5">6.
現在の状態が “新-” 状態 として捕捉される。
【！Current state captured as the "new" state】
</span>
<span class="_vt-phase" data-phases="6">7.
遷移~疑似要素たちが作成される。
【！Transition pseudo-elements created】
</span>
<span class="_vt-phase" data-phases="7">8.
描画は静止されなくなり，遷移~疑似要素が露呈される。
【！Rendering unpaused, revealing the transition pseudo-elements】
</span>
<span class="_vt-phase" data-phases="8">10.
疑似要素たちを~animateする。
【！Pseudo-elements animate】
</span>
<span class="_vt-phase" data-phases="9">11.
遷移~疑似要素たちが除去される。
【！Transition pseudo-elements removed】
</span>
	</div>
	<div>
<button id="_vt-buttons-prev">前</button>
<button id="_vt-buttons-next">次</button>
	</div>
</div>

		</section>
		<section id="transitions-as-enhancements">
<h3 title="Transitions as an enhancement">1.4. 増補としての遷移</h3>

<p>
`~view遷移^cite ~APIの設計においては、［
~animateされる遷移は、
下層の文書~状態~変化に対する視覚的な`増補^emである
］ことが要点を成す。
すなわち、
誤った環境設定や機器~拘束などに因り［
視覚的な遷移を作成することに失敗して、
遷移~animationは起こり得ないことが事前に判明した場合
］でも，開発者の `ViewTransitionUpdateCallback$I は常に~callされる。
◎
A key part of the View Transition API design is that an animated transition is a visual enhancement to an underlying document state change. That means a failure to create a visual transition, which can happen due to misconfiguration or device constraints, will not prevent the developer’s ViewTransitionUpdateCallback being called, even if it’s known in advance that the transition animations cannot happen.
</p>

<p>
例えば，開発者が`~view遷移~lifecycle＠#lifecycle$の開始~時に
`skipTransition()$m を~callした場合、
~animateされる遷移に関係している段
— `~view遷移~tree$を作成するなど —
は起こらなくなる。
しかしながら，
`ViewTransitionUpdateCallback$I は依然として~callされる
— 飛ばされるのは、
下層の状態~変更ではなく，視覚的な遷移に限られる。
◎
For example, if the developer calls skipTransition() at the start of the view transition lifecycle, the steps relating to the animated transition, such as creating the view transition tree, will not happen. However, the ViewTransitionUpdateCallback will still be called. It’s only the visual transition that’s skipped, not the underlying state change.
</p>

<p class="note">注記：
~DOM変更も飛ばされるべきである場合、
別の特能により取扱われる必要がある。
`NavigateEvent$I の `signal$m は、
【！https://wicg.github.io/navigation-api/#navigateevent】
【！https://wicg.github.io/navigation-api/#ref-for-dom-navigateevent-signal①】
そのような特能の開発者が これを取扱うためにも利用できる例である。
◎
Note: If the DOM change should also be skipped, then that needs to be handled by another feature. navigateEvent.signal is an example of a feature developers could use to handle this.
</p>

<p>
`~view遷移^cite ~APIは、［
`updateCallback$V を介して，~DOMを非同期的に変更する
］ことを許容するが，~DOM変更を［
遷移~自身に必要な~schedule法
］を超えて［
~queueする／~scheduleする
］ことは担当しない。
非同期的な~DOM変更には、
同時並行に起こり得るものもあれば
（例：それらが独立な~componentの中で起きている場合），［
他を~queueする／先立つ変更を中止する
］必要があるものもある。
これは、
当の~appを より全体的に捉える［
特能／~framework
］に委ねるのが最善である。
◎
Although the View Transition API allows DOM changes to be asynchronous via the ViewTransitionUpdateCallback, the API is not responsible for queuing or otherwise scheduling DOM changes beyond any scheduling needed for the transition itself. Some asynchronous DOM changes can happen concurrently (e.g if they’re happening within independent components), whereas others need to queue, or abort an earlier change. This is best left to a feature or framework that has a more holistic view of the application.
</p>

		</section>
		<section id="rendering-model">
<h3 title="Rendering Model">1.5. 描画~model</h3>

<p>
`~view遷移^cite ~APIは、
~UAが生成した疑似要素を利用して，
所与の要素が描画される状態を【画像として】再現することにより働く。
［
要素, その子孫
］に適用される［
要素の描画を成す側面
］
— 例えば［
`filter$p や `opacity$p 様な視覚的な効果／
`overflow$p や `clip-path$p による切取り
］ —
は、
その`画像を捕捉する$中で画像を生成するときに適用される。
◎
View Transition works by replicating an element’s rendered state using UA generated pseudo-elements. Aspects of the element’s rendering which apply to the element itself or its descendants, for example visual effects like filter or opacity and clipping from overflow or clip-path, are applied when generating its image in Capture the image.
</p>

<p>
しかしながら，そのように生成される画像には、
`mix-blend-mode$p の様な［
要素が埋込まれたとき，それをどう描くかを定義する~prop
］は適用できない。
そのような~propは、
当の要素に対応している `view-transition-group()$pe 疑似要素
— 当の要素に等価な~boxを生成するよう意味された疑似要素 —
に適用される。
◎
However, properties like mix-blend-mode which define how the element draws when it is embedded can’t be applied to its image. Such properties are applied to the element’s corresponding ::view-transition-group() pseudo-element, which is meant to generate a box equivalent to the element.
</p>

<p>
`view-transition-group()$pe に対応している要素が “新-” 状態~内に在る場合、
~browserは、
“新-” 状態~内にある~DOM要素との同期cを保つよう，
各~propを `view-transition-group()^pe へ複製する。
`view-transition-group()^pe に対応している要素が “旧-”, “新-” 両~状態~内に在って，
複製された~propは補間-可能な場合、
~browserは，［
当の~propを滑らかに~animateするための既定の~animation
］も設定しておくことになる。
◎
If the ::view-transition-group() has a corresponding element in the "new" states, the browser keeps the properties copied over to the ::view-transition-group() in sync with the DOM element in the "new" state. If the ::view-transition-group() has a corresponding both in the "old" and "new" state, and the property being copied is interpolatable, the browser also sets up a default animation to animate the property smoothly.
</p>

		</section>
		<section id="examples">
<h3 title="Examples">1.6. 例</h3>

<div class="example">
<p>
次の様な~patternを利用して，内容を更新する~pageがあったとする：
◎
Taking a page that already updates its content using a pattern like this:
</p>

<pre class="lang-js">
function spaNavigate(%data) {
  updateTheDOMSomehow(%data);
}
</pre>

<p>
それには、
次の様に`~view遷移$を追加することもできる：
◎
A view transition could be added like this:
</p>

<pre class="lang-js">
function spaNavigate(%data) {
  /* <span class="comment">
この~APIを~supportしない~browser用の~fallback：
◎
Fallback for browsers that don't support this API:
</span> */
  if (!document.startViewTransition) {
    updateTheDOMSomehow(%data);
    return;
  }

  /* <span class="comment">
遷移を伴わせる：
◎
With a transition:
</span> */
  document.startViewTransition(() =&gt; updateTheDOMSomehow(%data));
}
</pre>

<p>
結果は、
素早く~cross-fadeする，既定の遷移になる：
◎
This results in the default transition of a quick cross-fade:
</p>

<figure>`video-default^dgm
</figure>

<p>
この~cross-fadeは、
`疑似要素たちが成す~tree＠#view-transition-pseudos$上の~CSS~animationを利用して達成される。
なので、
~CSSを利用して~custom化できる。
例えば：
◎
The cross-fade is achieved using CSS animations on a tree of pseudo-elements, so customizations can be made using CSS. For example:
</p>

<pre class="lang-css">
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}
</pre>

<p>
その結果、
より遅く遷移するようになる：
◎
This results in a slower transition:
</p>

<figure>`video-slow^dgm
</figure>
</div>

<div class="example">
<p>
上の例に引き続き、
~motionを追加できる：
◎
Building on the previous example, motion can be added:
</p>

<pre class="lang-css">
@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
</pre>

<p>
その結果は：
◎
Here’s the result:
</p>
<figure>`video-slide^dgm
</figure>
</div>

<div class="example">
<p>
上の例に引き続き、
当の遷移~用に，
~headerと~headerの中の~textに自前の `view-transition-group()$pe を与えれる：
◎
Building on the previous example, the header and text within the header can be given their own ::view-transition-group()s for the transition:
</p>

<pre class="lang-css">
.main-header {
  view-transition-name: main-header;
}

.main-header-text {
  view-transition-name: main-header-text;
  /* <span class="comment">
要素の~sizeを一貫させる
— ~textは変わらないと見做して：
◎
Give the element a consistent size, assuming identical text:
</span> */
  width: fit-content;
}
</pre>

<p>
既定では、
これら各~groupの［
~size，位置
］は、
視覚的な状態が~cross-fadeする間に，
“旧-” 状態から “新-” 状態へ遷移することになる：
◎
By default, these groups will transition size and position from their “old” to “new” state, while their visual states cross-fade:
</p>

<figure>`video-header^dgm
</figure>
</div>

<div class="example">
<p>
上の例に引き続き、
一部の~pageには，~sidebarがあるとする：
◎
Building on the previous example, let’s say some pages have a sidebar:
</p>

<figure>`video-bad-sidebar^dgm
</figure>

<p>
この事例では、
~sidebarが［
“旧-”, “新-”
］両~状態~内にある場合は，
~sidebarは静的にした方が全体の見かけは良くなる。
他の場合，~sidebarは［
内／外
］へ~animateするべきである。
◎
In this case, things would look better if the sidebar was static if it was in both the “old” and “new” states. Otherwise, it should animate in or out.
</p>

<p>
`only-child$ps 疑似類を利用すれば、
これらの状態~用に特定的に~animationを作成できる：
◎
The :only-child pseudo-class can be used to create animations specifically for these states:
</p>

<pre class="lang-css">
.sidebar {
  view-transition-name: sidebar;
}

@keyframes slide-to-right {
  to { transform: translateX(30px); }
}

/* <span class="comment">
~sidebarが内へ来る遷移
◎
Entry transition
</span> */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* <span class="comment">
~sidebarが外へ出る遷移
◎
Exit transition
</span> */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
</pre>

<p>
既定の~animationは、［
~sidebarに “旧-”, “新-” 両~状態がある事例
］用には正しくなる。
◎
For cases where the sidebar has both an “old” and “new” state, the default animation is correct.
</p>

<figure>`video-good-sidebar^dgm
</figure>
</div>

<div class="example">
<p id="_example-5">
上の例から~~改めて、
利用者の~cursorを中心に “新-” 状態が円形に広がることが求まれたとする。
これは、
~CSSだけでは行えない。
◎
Not building from previous examples this time, let’s say we wanted to create a circular reveal from the user’s cursor. This can’t be done with CSS alone.
</p>

<p>
まず，~CSSにおいては、［
“旧-” 状態, “新-” 状態
］用の層を
— 既定の混色-法を伴わず，既定の~cross-fade~animationを防止する下で —
重ねることを許容する：
◎
Firstly, in the CSS, allow the “old” and “new” states to layer on top of one another without the default blending, and prevent the default cross-fade animation:
</p>

<pre class="lang-css">
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
</pre>

<p>
~JS~codeは：
◎
Then, the JavaScript:
</p>

<pre class="lang-js">
/* <span class="comment">
最後の~click~eventを格納する
◎
Store the last click event
</span> */
let %lastClick;
addEventListener('click', %event =&gt; (%lastClick = %event));

function spaNavigate(%data) {
  /* <span class="comment">
この~APIを~supportしない~browser用の~fallback：
◎
Fallback for browsers that don't support this API:
</span> */
  if (!document.startViewTransition) {
    updateTheDOMSomehow(%data);
    return;
  }

  /* <span class="comment">
~click位置を取得する
— できない場合、~screenの真中に~fall-backする：
◎
Get the click position, or fallback to the middle of the screen
</span> */
  const %x = %lastClick?.clientX ?? window.innerWidth / 2;
  const %y = %lastClick?.clientY ?? window.innerHeight / 2;
  /* <span class="comment">
最も遠い隅までの距離を取得する：
◎
Get the distance to the furthest corner
</span> */
  const %endRadius = Math.hypot(
    Math.max(%x, innerWidth - %x),
    Math.max(%y, innerHeight - %y)
  );

  /* <span class="comment">
遷移を作成する：
◎
Create a transition:
</span> */
  const %transition = document.startViewTransition(() =&gt; {
    updateTheDOMSomehow(%data);
  });

  /* <span class="comment">
疑似要素たちが作成されるまで待機する：
◎
Wait for the pseudo-elements to be created:
</span> */
  %transition.ready.then(() =&gt; {
    /* <span class="comment">
根の新たな~viewを~animateする：
◎
Animate the root's new view
</span> */
    document.documentElement.animate(
      {
        clipPath: [
          ``^`circle^(0 at ${%x}px ${%y}px)``^,
          ``^`circle^(${%endRadius}px at ${%x}px ${%y}px)``^,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        /* <span class="comment">
どの疑似要素を~animateするか指定する：
◎
Specify which pseudo-element to animate
</span> */
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}
</pre>

<p>
その結果は：
◎
And here’s the result:
</p>

<figure>`video-circle^dgm
</figure>
</div>

		</section>
	</section>
	<section id="css-properties">
<h2 title="CSS properties">2. ~CSS~prop</h2>

		<section id="view-transition-name-prop">
<h3 title="Tagging Individually Transitioning Subtrees: the view-transition-name property">2.1. 個別に遷移している下位treeの~tag付け： `view-transition-name^p ~prop</h3>

◎名 `view-transition-name@p
◎値 `none$v | `custom-ident$t
◎初 `none^v
◎適 すべての要素
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p class="note">注記：
`view-transition-name$p は`離散的$に~animate可能であるが、
~animateしても，稼働中な~view遷移には影響しない。
そうではなく、［
時間~越しに／`時列線$に基づいて
］変化し得る仕方で，その値を設定する仕方を与える。
例えば、
`~scroll駆動な~animation$に基づいて `view-transition-name$p を変更することに利用できよう。
◎
Note: though view-transition-name is discretely animatable, animating it doesn’t affect the running view transition. Rather, it’s a way to set its value in a way that can change over time or based on a timeline. An example for using this would be to change the view-transition-name based on scroll-driven animations.
</p>

<p>
`view-transition-name$p ~propは、
`~view遷移~内に捕捉され＠#captured-in-a-view-transition$た要素に対し，
指定された
`~view遷移~名@
の下で［
`~view遷移~tree$内で独立に追跡する
］ために， “~tag” を付与する。
捕捉された要素は、
当の~pageを成す残りとは独立に~animateされる。
◎
The view-transition-name property “tags” an element for capture in a view transition, tracking it independently in the view transition tree under the specified view transition name. An element so captured is animated independently of the rest of the page.
</p>

<dl class="valdef">
	<dt>`none@v</dt>
	<dd>
`要素$は、
~view遷移において独立に関与することはない。
◎
The element will not participate independently in a view transition.
</dd>

	<dt id="valdef-view-transition-name-custom-ident">`custom-ident$t</dt>
	<dd>
`要素$は、
~view遷移において，
指定された`~view遷移~名$を伴う［
旧-／新-
］`要素$として独立に関与する。
◎
The element participates independently in a view transition—as either an old or new element—with the specified view transition name.
</dd>
	<dd>
<p>
各`~view遷移~名$は、
`~tree視野な名前$である。
◎
Each view transition name is a tree-scoped name.
</p>

<p class="note">注記：
現時点では，文書~視野な~view遷移に限り~supportされるので、
当の文書に結付けられた~view遷移~名に限り尊重される。
◎
Note: Since currently only document-scoped view transitions are supported, only view transition names that are associated with the document are respected.
</p>
	</dd>
	<dd>
この `custom-ident^t においては、
値［
`none^v, `auto^v, `match-element^v
］は除外される。
【 `none^v 以外は、~level 2 にて`追加された新たな値＠~CSSVT2#additions-to-vt-name$。】
◎
The values none, auto, and match-element are excluded from &lt;custom-ident&gt; here.
</dd>
	<dd class="note">注記：
この名前が一意でない場合
（すなわち、
同じ `~view遷移~名$が複数の要素に同時に指定された場合）、
`~view遷移$は中止されることになる。
◎
Note: If this name is not unique (i.e. if two elements simultaneously specify the same view transition name) then the view transition will abort.
</dd>
</dl>

<p class="note">注記：
この~APIの目的においては、［
旧-状態~内にある要素, 新-状態~内にある別の要素
］に同じ`~view遷移~名$ `foo^v が付与された場合、
それらは［
同じ要素の異なる視覚-状態を表現している
］ものとして扱われ，`~view遷移~tree$内で~pairにされることになる。
それらの要素が同じ~objを指すことは必要yでないので，これは紛らわしくもなり得るが、
それらを［
同じ概念的な~page実体を成す，視覚的な状態
］であると見なすことは、
~modelとして有用になる。
◎
Note: For the purposes of this API, if one element has view transition name foo in the old state, and another element has view transition name foo in the new state, they are treated as representing different visual state of the same element, and will be paired in the view transition tree. This may be confusing, since the elements themselves are not necessarily referring to the same object, but it is a useful model to consider them to be visual states of the same conceptual page entity.
</p>

<p>
要素の`首要~box$が［
`断片化され$る／
`飛ばさ＠:~CSSCONTAIN#skips-its-contents$れる／
`描画され$ない
］場合、
この~propによる効果は無い。
正確な詳細は
`§ ~algo＠#algorithms$
を見よ。
◎
If the element’s principal box is fragmented, skipped, or not rendered, this property has no effect. See § 7 Algorithms for exact details.
</p>

<div class="algo">
<p>
所与の %要素【！`Element$I】 の
`文書~視野な~view遷移~名@
を取得するときは：
◎
To get the document-scoped view transition name for an Element element:
</p>
<ol>
	<li>
%視野~付き~view遷移~名 ~LET %要素 の `view-transition-name$p の`算出d値$
◎
Let scopedViewTransitionName be the computed value of view-transition-name for element.
</li>
	<li>
~RET ［
次が満たされるならば %視野~付き~view遷移~名 ／
~ELSE_ `none$v
］
⇒
［
%視野~付き~view遷移~名 ~NEQ `none$v
］~AND［
%視野~付き~view遷移~名 は %要素 の`~node文書$に結付けられている
【~shadow~treeではなく，~node文書に結付けられた`~tree視野な名前$である】
］
◎
If scopedViewTransitionName is associated with element’s node document, then return scopedViewTransitionName.
◎
Otherwise, return none.
</li>
</ol>
</div>

			<section id="named-and-transitioning">
<h4 title="Rendering Consolidation">2.1.1. 描画の集成</h4>

<p>
`要素$は、
~OR↓を満たす間は…
◎
Elements＼
</p>
<ul>
	<li>
`ある~view遷移~内に捕捉されたか$el ~EQ ~T
◎
captured in a view transition during a view transition＼
</li>
	<li>
`view-transition-name$p の`算出d値$ ~NEQ `none$v
◎
or whose view-transition-name computed value is not none＼
</li>
</ul>

<p>
…間は：
◎
(at any time):
</p>

<ul>
	<li>
`積層~文脈$を形成する。
◎
Form a stacking context.
</li>
	<li>
`~3D変形において平坦~化される＠~TRANSFORM2#grouping-property-values$。
◎
Are flattened in 3D transforms.
</li>
	<li>
`後景~根＠https://drafts.fxtf.org/filter-effects-2/#backdrop-root$を形成する。
◎
Form a backdrop root.
</li>
</ul>

			</section>
		</section>
	</section>
	<section id="pseudo">
<h2 title="Pseudo-elements">3. 疑似要素</h2>

		<section id="pseudo-root">
<h3 title="Pseudo-element Trees">3.1. 疑似要素~tree</h3>

<p class="note">注記：
これは、
疑似要素たちが成す~tree用の一般な定義である。
他の特能にもこの挙動が必要になった場合、
これらの定義は `css-pseudo-4$r へ移動されることになる。
◎
Note: This is a general definition for trees of pseudo-elements. If other features need this behavior, these definitions will be moved to [css-pseudo-4].
</p>

<p>
`疑似要素~根@
とは、
`疑似要素~tree$における`根$を指す，`~treeに留まる疑似要素$である。
◎
A pseudo-element root is a type of tree-abiding pseudo-element that is the root in＼
</p>

<p>
`疑似要素~tree@
とは、
`~treeに留まる疑似要素$たちが成す`~tree$である。
◎
a tree of tree-abiding pseudo-elements, known as the pseudo-element tree.
</p>

<p>
`疑似要素~tree$は、
その`子孫$たちの文書~順序を定義する。
◎
The pseudo-element tree defines the document order of its descendant tree-abiding pseudo-elements.
</p>

<p>
`疑似要素$ %要素 が ある`疑似要素~tree$に`関与-$しているときは、
%要素 の`親$が %要素 の`出自の疑似要素$になる。
◎
When a pseudo-element participates in a pseudo-element tree, its originating pseudo-element is its parent.
</p>

<p>
`疑似要素~根$のある`子孫$ %疑似要素 に自身以外に`同胞$は無い場合、
`only-child$ps は， %疑似要素 に合致する。
◎
If a descendant pseudo of a pseudo-element root has no other siblings, then :only-child matches that pseudo.
</p>

<p class="note">注記：
このことは、
`::view-transition-new(ident):only-child^css が
`view-transition-new(ident)^pe を選択するのは、
親である `view-transition-image-pair(ident)^pe の`子$は 1 つしかない
— すなわち，`同胞$である `view-transition-old(ident)^pe は無い —
場合に限られることを意味する。
◎
Note: This means that ::view-transition-new(ident):only-child will only select ::view-transition-new(ident) if the parent ::view-transition-image-pair(ident) contains a single child. As in, there is no sibling ::view-transition-old(ident).
</p>

		</section>
		<section id="view-transition-pseudos">
<h3 title="View Transition Pseudo-elements">3.2. ~view遷移~用の疑似要素</h3>

<p>
`~view遷移$の視覚-化は、
`疑似要素~tree$として表現される
— それは、
`~view遷移~tree@
と呼ばれ，以下に定義される
`~view遷移~疑似要素@
たちから構成される。
この~treeは，`遷移~疑似要素たちを設定しておく$間に築かれ、［
`根~要素$を`出自の要素$とする `view-transition$pe 疑似要素
］が，その根になる。
`~view遷移~疑似要素$を成すすべては、［
それらの`最終的な出自の要素$である，`文書~要素$【すなわち根~要素】
］から【相対的に】選択される。
◎
The visualization of a view transition is represented as a pseudo-element tree called the view transition tree composed of the view transition pseudo-elements defined below. This tree is built during the setup transition pseudo-elements step, and is rooted under a ::view-transition pseudo-element originating from the root element. All of the view transition pseudo-elements are selected from their ultimate originating element, the document element.
</p>

<p>
`~view遷移~tree$は、
~accessibility~treeには公開されない。
◎
The view transition tree is not exposed to the accessibility tree.
</p>

<div class="example">
<p>
例えば，
`view-transition-group()$pe 疑似要素は、
`:root::view-transition-group()^css のように，
根~要素~選択子 `root$ps に直に付される
— 親である `view-transition$pe 疑似要素に付されるのではなく。
◎
For example, the ::view-transition-group() pseudo-element is attached to the root element selector directly, as in :root::view-transition-group(); it is not attached to its parent, the ::view-transition pseudo-element.
</p>
</div>

<div class="note">
<p>注記：
~UAは、
文書の “旧-”, “新-” 両~状態を捕捉したなら，
次の様な疑似要素たちが成す構造を作成する：
◎
Once the user-agent has captured both the “old” and “new” states of the document, it creates a structure of pseudo-elements like the following:
</p>

<pre class="presentation">
::view-transition
├─ ::view-transition-group(%name)
│  └─ ::view-transition-image-pair(%name)
│     ├─ ::view-transition-old(%name)
│     └─ ::view-transition-new(%name)
└─ …他の~groupたち…
</pre>

<p>
`view-transition-name$p を伴う各~要素は、
別々に捕捉され，
各~一意な `view-transition-name$p 用に `view-transition-group()$pe が作成される。
◎
Each element with a view-transition-name is captured separately, and a ::view-transition-group() is created for each unique view-transition-name.
</p>

<p>
`文書~要素$には、
`~UA~stylesheet＠#ua-styles$内で，
`view-transition-name$p として `root^v が便利~用に与えられる。
◎
For convenience, the document element is given the view-transition-name "root" in the user-agent style sheet.
</p>

<p>
［
“旧-” ／ “新-”
］状態~内に捕捉が無い事例では、［
`view-transition-old()$pe ／ `view-transition-new()$pe
］も無い。
◎
Either ::view-transition-old() or ::view-transition-new() are absent in cases where the capture does not have an “old” or “new” state.
</p>

<p>
生成された各~疑似要素に対しては、
~CSSにより，その［
外観／挙動
］を~custom化でき, ~animationを追加できる。
これは、
遷移に対する全部的な~custom化を可能化する。
◎
Each of the pseudo-elements generated can be targeted by CSS in order to customize its appearance, behavior and/or add animations. This enables full customization of the transition.
</p>
</div>

			<section id="named-view-transition-pseudo">
<h4 title="Named View Transition Pseudo-elements">3.2.1. 有名~view遷移~疑似要素</h4>

<p>
`~view遷移~疑似要素$のうちいくつかは、
`有名~view遷移~疑似要素@
でもある
— それは、
`~treeに留まる疑似要素$であり，
ある`~view遷移~名$が結付けられる。
◎
Several of the view transition pseudo-elements are named view transition pseudo-elements, which are functional tree-abiding view transition pseudo-elements associated with a view transition name.＼
</p>

<p>
`選択子$としての`~view遷移~疑似要素$は、
`関数形~疑似要素$であり，
その構文は次の~patternに従う
【すなわち，名前を成す %pseudo は可変】：
◎
These pseudo-elements take a &lt;pt-name-selector&gt; as their argument, and their syntax follows the pattern:
</p>

<pre class="prod">
::view-transition-%pseudo(`pt-name-selector$t)
</pre>

<p>
引数 `pt-name-selector$t は、
ある`~view遷移~名$を選択する。
その構文は、
次で定義される：
◎
where &lt;pt-name-selector&gt; selects a view transition name, and has the following syntax definition:
</p>

<pre class="prod">
`pt-name-selector@t
	= '*'
	| `custom-ident$t
</pre>

<p>
`選択子$としての`有名~view遷移~疑似要素$は、
対応している`疑似要素$
【すなわち，`~view遷移~tree$内に生成される同じ名前の疑似要素】
のうち，
`pt-name-selector$t に応じて
⇒＃
`*^v ならば どれにも合致する。
`custom-ident$t ならば，それと同じ`~view遷移~名$を伴うものに限り合致する。
◎
A named view transition pseudo-element selector only matches a corresponding pseudo-element if its &lt;pt-name-selector&gt; matches that pseudo-element’s view transition name, i.e. if it is either * or a matching &lt;custom-ident&gt;.
</p>

<p class="note">注記：
`~view遷移~疑似要素$の`~view遷移~名$は、
その作成を誘発した `view-transition-name$p の値に設定される。
◎
Note: The view transition name of a view transition pseudo-element is set to the view-transition-name that triggered its creation.
</p>

<p>
`選択子$としての`有名~view遷移~疑似要素$の`詳細度$は、
その引数に応じて
⇒＃
`custom-ident$t をとる場合，`型~選択子$と等価【(0, 0, 1)】になるとする。
`*^v をとる場合， 0 【(0, 0, 0)】になるとする。
◎
The specificity of a named view transition pseudo-element selector with a &lt;custom-ident&gt; argument is equivalent to a type selector. The specificity of a named view transition pseudo-element selector with a * argument is zero.
</p>

			</section>
			<section id="view-transition-pseudo">
<h4 title="View Transition Tree Root: the ::view-transition pseudo-element">3.2.2. ~view遷移~tree根： `view-transition^pe 疑似要素</h4>

<p>
`view-transition@pe
`疑似要素$は：
◎
The ::view-transition pseudo-element＼
</p>
<ul>
	<li>
`~treeに留まる疑似要素$である。
◎
is a tree-abiding pseudo-element＼
</li>
	<li>
`疑似要素~根$である。
◎
that is also a pseudo-element root.＼
</li>
	<li>
その`出自の要素$は、
当の文書の`文書~要素$である。
◎
Its originating element is the document’s document element,＼
</li>
	<li>
その`包含塊$は、
`~snapshot包含塊$である。
◎
and its containing block is the snapshot containing block.
</li>
</ul>

<p class="note">注記：
この要素は、
すべての `view-transition-group()$pe 疑似要素の`親$として~serveする。
◎
Note: This element serves as the parent of all ::view-transition-group() pseudo-elements.
</p>

			</section>
			<section id="::view-transition-group">
<h4 title="View Transition Named Subtree Root: the ::view-transition-group() pseudo-element">3.2.3. ~view遷移~有名~下位tree根： `view-transition-group()^pe 疑似要素</h4>

<p>
`view-transition-group()@pe
`疑似要素$は：
◎
The ::view-transition-group() pseudo-element＼
</p>
<ul>
	<li>
`有名~view遷移~疑似要素$である。
◎
is a named view transition pseudo-element＼
</li>
	<li>
引数に合致している有名`~view遷移$の捕捉を表現する。
◎
that represents a matching named view transition capture.＼
</li>
	<li>
各`~view遷移~名$用に `view-transition$pe `疑似要素$の`子$として生成される。
◎
A ::view-transition-group() pseudo-element is generated for each view transition name as a child of the ::view-transition pseudo-element,＼
</li>
	<li>
対応している `view-transition-image-pair()$pe を包含する。
◎
and contains a corresponding ::view-transition-image-pair().
</li>
</ul>

<div class="note">
<p>注記：
この要素は、
初期~時は，
“旧-” 要素は［
在るならば それ／
無いならば “新-” 要素
］の［
~size, 位置
］を映出す。
◎
This element initially mirrors the size and position of the “old” element, or the “new” element if there isn’t an “old” element.
</p>

<p>
要素~用に “旧-”, “新-” 両~状態が在る場合、
`動的な~view遷移~stylesheet$doc内の~styleは，この疑似要素の［
`width$p, `height$p
］を［
旧-要素の`~border~box$の~size
］から［
新-要素の`~border~box$の~size
］へ~animateする。
◎
If there’s both an “old” and “new” state, styles in the dynamic view transition style sheet animate this pseudo-element’s width and height from the size of the old element’s border box to that of the new element’s border box.
</p>

<p>
要素の `transform$p は、
旧-要素の~screen空間~変形から
新-要素の~screen空間~変形へ~animateされる。
◎
Also the element’s transform is animated from the old element’s screen space transform to the new element’s screen space transform.
</p>

<p>
この~styleは、
~animateされる~propたちの値が遷移が始まる時点に決定されてから，
動的に生成される。
◎
This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
</p>
</div>

			</section>
			<section id="::view-transition-image-pair">
<h4 title="View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element">3.2.4. ~view遷移~画像~pair隔離： `view-transition-image-pair()^pe 疑似要素</h4>

<p>
`view-transition-image-pair()@pe
`疑似要素$は：
◎
The ::view-transition-image-pair() pseudo-element＼
</p>
<ul>
	<li>
`有名~view遷移~疑似要素$である。
◎
is a named view transition pseudo-element＼
</li>
	<li>
対応している［
旧-, 新-
］`~view遷移$の捕捉が成す~pairを表現する。
◎
that represents a pair of corresponding old/new view transition captures.＼
</li>
	<li>
対応している `view-transition-group()$pe 疑似要素の`子$である
◎
This pseudo-element is a child of the corresponding ::view-transition-group() pseudo-element and＼
</li>
	<li>
対応している［
`view-transition-old()$pe ／
`view-transition-new()$pe 
］疑似要素を（挙げられた順序で）包含する。
◎
contains a corresponding ::view-transition-old() pseudo-element and/or a corresponding ::view-transition-new() pseudo-element (in that order).
</li>
</ul>

<div class="note">
<p>注記：
この要素は、
各~子~用に
<code class="css">`isolation$p: `isolate^v</code>
を供するために存在する。
この要素は、
各 `view-transition-group()$pe の`子$として，常に在る。
この隔離（ `isolation^en ）は、
当の画像~pairが［
他の視覚的な出力に影響することなく，
通常でない混色-~mode
【 `normal^v 以外の `blend-mode$t 】
で混色される
］ことを許容する。
◎
This element exists to provide isolation: isolate for its children, and is always present as a child of each ::view-transition-group(). This isolation allows the image pair to be blended with non-normal blend modes without affecting other visual outputs.
</p>
</div>

			</section>
			<section id="::view-transition-old">
<h4 title="View Transition Old State Image: the ::view-transition-old() pseudo-element">3.2.5. ~view遷移の旧-状態~画像： `view-transition-old()^pe 疑似要素</h4>

<p>
`view-transition-old()@pe
`疑似要素$は、
空な`有名~view遷移~疑似要素$であり，
“旧-” 状態を成す視覚的~snapshotを`置換d要素$として表現する
— 表現する “旧-” 状態が無い場合、
それは，省略される。
各 `view-transition-old()$pe 疑似要素には、
その`子$として，
対応する `view-transition-image-pair()$pe 疑似要素が在る。
◎
The ::view-transition-old() pseudo-element is an empty named view transition pseudo-element that represents a visual snapshot of the “old” state as a replaced element; it is omitted if there’s no “old” state to represent. Each ::view-transition-old() pseudo-element is a child of the corresponding ::view-transition-image-pair() pseudo-element.
</p>

<div class="note">
<p>注記：
`only-child$ps を［
この要素が `view-transition-image-pair()$pe 内の唯一の要素である事例
］で合致する選択子として利用できる。
◎
:only-child can be used to match cases where this element is the only element in the ::view-transition-image-pair().
</p>

<p>
この要素の外観は、
`object-*^p ~propにより，他の置換d要素と同じ仕方で操作できる。
◎
The appearance of this element can be manipulated with object-* properties in the same way that other replaced elements can be.
</p>
</div>

<p class="note">注記：
画像の［
内容, `生来な寸法$
］は
⇒＃
`画像を捕捉する$ときに捕捉される。
`遷移~疑似要素たちを設定しておく$ときに設定される。
◎
Note: The content and natural dimensions of the image are captured in capture the image, and set in setup transition pseudo-elements.
</p>

<p class="note">注記：
これらの疑似要素を~animateするための~styleは、
`動的な~view遷移~stylesheet$docに追加される。
詳細は、［
`遷移~疑似要素たちを設定しておく$／
`疑似要素~styleを更新する$
］にて。
◎
Note: Additional styles in the dynamic view transition style sheet added to animate these pseudo-elements are detailed in setup transition pseudo-elements and update pseudo-element styles.
</p>

			</section>
			<section id="::view-transition-new">
<h4 title="View Transition New State Image: the ::view-transition-new() pseudo-element">3.2.6. ~view遷移の新-状態~画像： `view-transition-new()^pe 疑似要素</h4>

<p>
`view-transition-new()@pe
`疑似要素$は、
（ `view-transition-old()$pe 疑似要素と相似的に）
空な`有名~view遷移~疑似要素$であり，
“新-” 状態を成す視覚的~snapshotを`置換d要素$として表現する
— 表現する “新-” 状態が無い場合、
各 `view-transition-new()$pe 疑似要素には、
その`子$として対応する `view-transition-image-pair()$pe 疑似要素が在る。
◎
The ::view-transition-new() pseudo-element (like the analogous ::view-transition-old() pseudo-element) is an empty named view transition pseudo-element that represents a visual snapshot of the “new” state as a replaced element; it is omitted if there’s no “new” state to represent. Each ::view-transition-new() pseudo-element is a child of the corresponding ::view-transition-image-pair() pseudo-element.
</p>

<p class="note">注記：
画像の［
内容, `生来な寸法$
］は
⇒＃
`画像を捕捉する$ときに捕捉される。
`遷移~疑似要素たちを設定しておく$ときに設定される。
`疑似要素~styleを更新する$ときに更新される。
◎
Note: The content and natural dimensions of the image are captured in capture the image, then set and updated in setup transition pseudo-elements and update pseudo-element styles.
</p>

			</section>
		</section>
	</section>
	<section id="view-transition-rendering">
<h2 title="View Transition Layout">4. ~view遷移の~layout</h2>

<p>
`~view遷移~疑似要素$は、［
`初期~包含塊$ではなく`~snapshot包含塊$から出自する
］こと，および［
当の文書を成す残りより上にある`~view遷移~層$
］内に塗られることを除けば、
通常の要素と同様に，
~styleされ, ~lay-outされ, 描画される。
◎
The view transition pseudo-elements are styled, laid out, and rendered like normal elements, except that they originate in the snapshot containing block rather than the initial containing block and are painted in the view transition layer above the rest of the document.
</p>

		<section id="snapshot-containing-block-concept">
<h3 title="The Snapshot Containing Block">4.1. ~snapshot包含塊</h3>

<p>
`~snapshot包含塊@
は、［
~UIwindowを成す~page内容を表示するようになり得るもの
］が成す すべての区画を覆う矩形であり，
（したがって［
根~scrollbarや
`対話的~widget＠https://drafts.csswg.org/css-viewport/#interactive-widget$
］に関わらず一貫する）。
これにより、
`文書~要素$の［
`旧-画像$cE, `新-要素$cE
］が一貫する見込みが高くなる。
◎
The snapshot containing block is a rectangle that covers all areas of the window that could potentially display page content (and is therefore consistent regardless of root scrollbars or interactive widgets). This makes it likely to be consistent for the document element’s old image and new element.
</p>

<p>
`子~navigable$の中の`~snapshot包含塊$は、
当の~navigableの`表示域$に`~scrollbar側溝$（もしあれば）を併せた領域になる。
◎
Within a child navigable, the snapshot containing block is the union of the navigable’s viewport with any scrollbar gutters.
</p>

<figure>
<div class="side-by-side">
<p class="alt" hidden id="_dgm-phone-browser">
あるスマホ~screenを成す図式。
上端に 状態s~bar,
その下に ~browserの~URL~bar，
下端に ~OS “戻る” ~buttonを伴う~barがある。
それらの合間を~web内容~用の区画が占めていて，［
浮動している~scrollbar,
~virtual-keyboard
］を伴う。
◎
A diagram of a phone screen, including a top status bar, a browser URL bar, web-content area with a floating scrollbar, a virtual keyboard, and a bottom bar with an OS back button
</p>
<p class="alt" hidden id="_dgm-phone-browser-snapshot-root">
前と同じ図式だが、
~snapshot包含塊を成す区画が強調されている
— それは、［
上端にある状態s~bar,
下端にある~OS “戻る” ~buttonを伴う~bar
］を除く，すべてを含む。
◎
The previous diagram, but highlights the area that's the 'snapshot containing block', which includes everything except the top status bar and the bottom bar with the OS back button
</p>
</div>

<figcaption>
ある~mobile~OS上の`~snapshot包含塊$を成す例。
［
~URL~bar, ~keyboard
］は、
この包含塊に含まれる
— ［
前者は，遠くへ~scrollされ得る／
後者は，現れたり消えたりする
］ので。
［
上端, 下端
］にある~barは、
~browserではなく~OSの一部を成すので，
この包含塊には含まれない。
◎
An example of the snapshot containing block on a mobile OS. The snapshot includes the URL bar, as this can be scrolled away. The keyboard is included as this appears and disappears. The top and bottom bars are part of the OS rather than the browser, so they’re not included in the snapshot containing block.
</figcaption></figure>

<figure>
<div class="side-by-side">
<p class="alt" hidden id="_dgm-desktop-browser">
ある~desktop~browserの~UIwindowを成す図式。
上端には~UItab~bar，
その下に~browserの~URL~barがある。
それらの下を~web内容~区画が占めていて，［
横, 縦
］~scrollbarも伴われる。
◎
A diagram of a desktop browser window, including a tab bar, a URL bar, and a web-content area featuring both horizontal and vertical scrollbars
</p>
<p class="alt" hidden id="_dgm-desktop-browser-snapshot-root">
前と同じ図式だが、
~snapshot包含塊が成す区画が強調されている
— それは、
~web内容~区画と両~scrollbarを含んでいる。
◎
The previous diagram, but highlights the area that's the 'snapshot containing block', which includes the web content area and the scrollbars
</p>
</div>

<figcaption>
ある~desktop~OS上の`~snapshot包含塊$を成す例。
これは，［
横, 縦
］~scrollbarを含むが、
~URL~barを含まない
— その区画~内には~web内容は決して現れないので。
◎
An example of the snapshot containing block on a desktop OS. This includes the scrollbars, but does not include the URL bar, as web content never appears in that area.
</figcaption></figure>

<p>
`~snapshot包含塊の原点@
は、
`~snapshot包含塊$の左上~隅を指す。
◎
The snapshot containing block origin refers to the top-left corner of the snapshot containing block.
</p>

<p>
`~snapshot包含塊の~size@
は、
`~snapshot包含塊$の［
横幅, 縦幅
］を順に与える，
2 個の実数が成す`~tuple$。
◎
The snapshot containing block size refers to the width and height of the snapshot containing block as a tuple of two numbers.
</p>

<p>
`~snapshot包含塊$は、［
`view-transition$pe, その各~子孫
］用の［
`絶対~位置決め包含塊$,
`固定d位置決め包含塊$
］を与えるものと見なされる。
◎
The snapshot containing block is considered to be an absolute positioning containing block and a fixed positioning containing block for ::view-transition and its descendants.
</p>

		</section>
		<section id="view-transition-stacking-layer">
<h3 title="View Transition Painting Order">4.2. ~view遷移における塗ng順序</h3>

<p>
この仕様は、
`CSS2$r `§ 積層~文脈の詳しい記述＠~CSS22/zindex.html#elaborate-stacking-contexts$
にて確立される塗ng順序の終端に，
新たな積層~層として`~view遷移~層$を導入する。
◎
This specification introduces a new stacking layer, the view transition layer, to the end of the painting order established in CSS2§E Elaborate Description of Stacking Contexts. [CSS2]
</p>

<p>
`view-transition$pe 疑似要素は、
`~view遷移~層@
と呼ばれる新たな積層~文脈を生成する。
それは、
文書を成す他のすべての内容（`上端~層$内に描画される内容も含む）より後に塗られる
— そのような内容に適用された~filterその他の効果があれば，それらより後に。
（それは、
そのような効果の~subjectにならない
— 効果は、［［
`view-transition-old()$pe, `view-transition-new()$pe
］疑似要素を成す描画される内容
］に影響する所までに限られる。）
◎
The ::view-transition pseudo-element generates a new stacking context, called the view transition layer, which paints after all other content of the document (including any content rendered in the top layer), after any filters and effects that are applied to such content. (It is not subject to such filters or effects, except insofar as they affect the rendered contents of the ::view-transition-old() and ::view-transition-new() pseudo-elements.)
</p>

<p class="note">注記：
この特能の意図は、
~pageを成す内容を，上端~層~内の要素を含めて捕捉-可能にすることにある。
それを成遂げるため、
`~view遷移~層$は，捕捉された積層~文脈の一部を成し得ない
— そうすると循環依存になるので。
したがって、
`~view遷移~層$は，他のすべての内容の同胞になる。
◎
Note: The intent of the feature is to be able to capture the contents of the page, which includes the top layer elements. In order to accomplish that, the view transition layer cannot be a part of the captured stacking contexts, since that results in a circular dependency. Therefore, the view transition layer is a sibling of all other content.
</p>

<p>
［
`文書$ %文書 にて`作動中な~view遷移$docの`相$vT ~EQ `~animate中$i
］の間は、［
%文書 内の要素のうち`~view遷移~内に捕捉され＠#captured-in-a-view-transition$たもの
］により生成される~box，および その`要素~内容$は、
`遷移~根~疑似要素$vTの`広義-子孫$を除いて
⇒＃
塗られない（要素の `visibility$p は `hidden^v であったかのように）／
接触判定に応答しない（要素の `pointer-events$p は `none^v であったかのように）
◎
When a Document’s active view transition’s phase is "animating", the boxes generated by any element in that Document with captured in a view transition and its element contents, except transition root pseudo-element’s inclusive descendants, are not painted (as if they had visibility: hidden) and do not respond to hit-testing (as if they had pointer-events: none).
</p>

<p class="note">注記：
遷移に関与している要素は、
その~DOM内での所在における塗ngを飛ばす必要がある
— それらの画像は、
代わりに，対応している `view-transition-new()$pe 疑似要素~内に塗られるので。
類似に，接触判定も飛ばされる
— 要素の~DOM内での所在は、
その内容が描画される所には対応しないので。
しかしながら、
これらの要素が［
支援技術／~accessibility~tree
］により どう~accessされるかは変化しない。
◎
Note: Elements participating in a transition need to skip painting in their DOM location because their image is painted in the corresponding ::view-transition-new() pseudo-element instead. Similarly, hit-testing is skipped because the element’s DOM location does not correspond to where its contents are rendered. However, there is no change in how these elements are accessed by assistive technologies or the accessibility tree.
</p>

		</section>
	</section>
	<section id="ua-styles">
<h2 title="User Agent Stylesheet">5.~UA~stylesheet</h2>

<p>
`大域的な~view遷移~UA~stylesheet@
は、
`~UA出自$に属する~stylesheetであり，次の規則を包含する：
◎
The global view transition user agent style sheet is a user-agent origin style sheet containing the following rules:
</p>

<pre class="lang-css">
:root {
  view-transition-name: root;
}

:root::view-transition {
  position: fixed;
  inset: 0;
}

:root::view-transition-group(*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

:root::view-transition-image-pair(*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

:root::view-transition-old(*),
:root::view-transition-new(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

/* <span class="comment">
既定の~cross-fade遷移
◎
Default cross-fade transition
</span> */
@keyframes -ua-view-transition-fade-out {
  to { opacity: 0; }
}
@keyframes -ua-view-transition-fade-in {
  from { opacity: 0; }
}

/* <span class="comment">
【新-, 旧-】2 つの画像が在るとき，それらを混色するための~keyframe
◎
Keyframes for blending when there are 2 images
</span> */
@keyframes -ua-mix-blend-mode-plus-lighter {
  from { mix-blend-mode: plus-lighter }
  to { mix-blend-mode: plus-lighter }
}
</pre>
<details class="note">
<summary>
説明的な要約
◎
Explanatory Summary
</summary>
<p>
この~UA~stylesheetは、
次に挙げるものを行う：
◎
This UA style sheet does several things:
</p>
<ul>
	<li>
`view-transition$pe を`~snapshot包含塊$全体を覆うように~lay-outする
— 各~子である `view-transition-group()^pe【！:view-transition-group()】を，
それに相対的に~lay-outできるよう。
◎
Lay out ::view-transition to cover the entire snapshot containing block so that each :view-transition-group() child can lay out relative to it.
</li>
	<li>
`根~要素$に既定の`~view遷移~名$を与える
— それが独立に選択されることを許容するため。
◎
Give the root element a default view transition name, to allow it to be independently selected.
</li>
	<li>
`view-transition-image-pair()$pe 疑似要素による~layoutに対する干渉を抑制する
— ほとんどの目的において、
作者が［
`view-transition-old()$pe ／ `view-transition-new()$pe
］を本質的に `view-transition-group()$pe の直な子として扱えるよう。
◎
Reduce layout interference from the ::view-transition-image-pair() pseudo-element so that authors can essentially treat ::view-transition-old() and ::view-transition-new() as direct children of ::view-transition-group() for most purposes.
</li>
	<li>
~treeを通して，~animation計時を継承する
— 既定では、
`view-transition-group()$pe に設定された~animation計時が，
すべての子孫の~animation計時を規定することになるよう。
◎
Inherit animation timing through the tree so that by default, the animation timing set on a ::view-transition-group() will dictate the animation timing of all its descendants.
</li>
	<li>
要素の各~捕捉［
`view-transition-old()$pe,
`view-transition-new()$pe
］を~styleする
— それらを補間するに伴い，
`view-transition-group()$pe に設定された［
~size, 位置
］に合致するよう
（アリな限り，それらの縦横比を~~保ちながら）。
これらの要素の~sizingは［
論理-~prop, 物理-~prop
］による座標どうしの対応付けに依存するので、
`動的な~view遷移~stylesheet$docは，
~DOM要素たちから関連な~styleを複製する。
◎
Style the element captures ::view-transition-old() and ::view-transition-new() to match the size and position set on ::view-transition-group() (insofar as possible without breaking their aspect ratios) as it interpolates between them. Since the sizing of these elements depends on the mapping between logical and physical coordinates, dynamic view transition style sheet copies relevant styles from the DOM elements.
</li>
	<li>
各 `view-transition-group()$pe 用に，
既定の［
0.25 秒間の~cross-fade~animation
］を設定しておく。
◎
Set up a default quarter-second cross-fade animation for each ::view-transition-group().
</li>
</ul>
</details>

<p>
追加的な~styleは、
`~view遷移$の間に，`動的な~view遷移~stylesheet$docを通して`~UA出自$に動的に追加される。
◎
Additional styles are dynamically added to the user-agent origin during a view transition through the dynamic view transition style sheet.
</p>

	</section>
	<section id="api">
<h2 title="API">6. ~API</h2>

		<section id="additions-to-document-api">
<h3 title="Additions to Document">6.1. `Document^I に対する追加</h3>

<pre class="idl">
partial interface `Document$I {
  `ViewTransition$I `startViewTransition$m(optional `ViewTransitionUpdateCallback$I %updateCallback);
};

callback `ViewTransitionUpdateCallback@I = `Promise$&lt;`any$&gt; ();
</pre>

<dl class="domintro">
	<dt>`viewTransition$V【！ViewTransition】 = document【！Document】.`startViewTransition$m(`updateCallback$V)</dt>
	<dd>
新たな`~view遷移$を開始する
（`文書$に既存の`作動中な~view遷移$docがある場合、
それを取消した上で）。
◎
Starts a new view transition (canceling the document’s existing active view transition, if any).
</dd>
	<dd>
`updateCallback$V は、
供された場合は，非同期的に
— 当の文書の現在の状態が捕捉されたなら —
~callされる。
その後，
`updateCallback$V が返した~promiseが充足されるとき、
当の文書の新-状態が捕捉され，遷移が起動される。
◎
updateCallback, if provided, is called asynchronously, once the current state of the document is captured. Then, when the promise returned by updateCallback fulfills, the new state of the document is captured and the transition is initiated.
</dd>
	<dd>
`updateCallback$V は、
供された場合は，遷移が起こり得ない場合でも
（例：重複な `view-transition-name^p 値に因り），
`常に^em ~callされることに注意。
遷移は，状態~変更~周りの増補なので、
遷移を作成することに失敗しても，
【 `updateCallback$V による】状態~変更は決して防止されない。
この原則についての詳細は、
`§ 増補としての遷移＠#transitions-as-enhancements$
を見よ。
◎
Note that updateCallback, if provided, is always called, even if the transition cannot happen (e.g. due to duplicate view-transition-name values). The transition is an enhancement around the state change, so a failure to create a transition never prevents the state change. See § 1.4 Transitions as an enhancement for more details on this principle.
</dd>
	<dd>
`updateCallback$V が返した~promiseが却下された場合、
遷移は飛ばされる。
◎
If the promise returned by updateCallback rejects, the transition is skipped.
</dd>
</dl>

			<section id="ViewTransition-prepare">
<h4 title="startViewTransition() Method Steps">6.1.1. `startViewTransition()^m ~method手続き</h4>

<div class="algo">
<p>
`startViewTransition(updateCallback)@m
`~method手続き$は：
◎
The method steps for startViewTransition(updateCallback) are as follows:
</p>
<ol>
	<li>
%遷移 ~LET `新たな~obj$( `ViewTransition$I, コレに`関連な~realm$ )
◎
Let transition be a new ViewTransition object in this’s relevant Realm.
</li>
	<li>
~IF［
%updateCallback ~NEQ ε
］
⇒
%遷移 の`更新~callback$vT ~SET %updateCallback
◎
If updateCallback is provided, set transition’s update callback to updateCallback.
</li>
	<li>
%文書 ~LET コレに`関連な大域~obj$に`結付けられた文書$
◎
Let document be this’s relevant global object’s associated document.
</li>
	<li>
~IF［
%文書 の`可視性~状態$doc ~EQ `hidden^l
］
⇒＃
`~view遷移を飛ばす$( %遷移, "`InvalidStateError$E" )；
~RET %遷移
◎
If document’s visibility state is "hidden", then skip transition with an "InvalidStateError" DOMException, and return transition.
</li>
	<li>
<p>
~IF［
%文書 にて`作動中な~view遷移$doc ~NEQ ~NULL
］
⇒
`~view遷移を飛ばす$( コレ, "`AbortError$E" )
◎
If document’s active view transition is not null, then skip that view transition with an "AbortError" DOMException in this’s relevant Realm.
</p>

<p class="note">注記：
これは、
2 つの非同期的な`更新~callback$vT
— %文書 にて現在`作動中な~view遷移$doc用のそれ, この %遷移 用のそれ —
を同時並行に
（したがって、場合によっては逆順に）
走らす結果にもなり得る。
`この特能の設計＠#transitions-as-enhancements$により、
これらによる~DOM変更は，開発者が別の［
特能／~framework
］を利用して正しく~scheduleするものと見做される。
◎
Note: This can result in two asynchronous update callbacks running concurrently (and therefore possibly out of sequence): one for the document’s current active view transition, and another for this transition. As per the design of this feature, it’s assumed that the developer is using another feature or framework to correctly schedule these DOM changes.
</p>
	</li>
	<li>
<p>
%文書 にて`作動中な~view遷移$doc ~SET %遷移
◎
Set document’s active view transition to transition.
</p>

<p class="note">注記：
`~view遷移$の処理nは、
`~view遷移を設定しておく$中で，
`処理待ち遷移~演算を遂行する$ことを介して継続される【？】。
◎
Note: The view transition process continues in setup view transition, via perform pending transition operations.
</p>
	</li>
	<li>
~RET %遷移
◎
Return transition.
</li>
</ol>
</div>

			</section>
		</section>
		<section id="the-domtransition-interface">
<h3 title="The ViewTransition interface">6.2. `ViewTransition^I ~interface</h3>

<pre class="idl">
[`Exposed$=Window]
interface `ViewTransition@I {
  readonly attribute `Promise$&lt;`undefined$&gt; `updateCallbackDone$m;
  readonly attribute `Promise$&lt;`undefined$&gt; `ready$m;
  readonly attribute `Promise$&lt;`undefined$&gt; `finished$m;
  `undefined$ `skipTransition$m();
};
</pre>

<p>
`ViewTransition$I ~interfaceは、
単独の同一-文書な`~view遷移$
— すなわち、［
開始~時の文書, 終了~時の文書
］が同じで，場合によっては文書の~DOM構造に対する変更を伴う遷移 —
を表現し，それを制御する。
◎
The ViewTransition interface represents and controls a single same-document view transition, i.e. a transition where the starting and ending document are the same, possibly with changes to the document’s DOM structure.
</p>

<dl class="domintro">
	<dt>`viewTransition$V.`updateCallbackDone$m</dt>
	<dd>
この~promiseは、
`updateCallback$V が返した~promiseが充足されたとき充足され，
却下されたとき却下される。
◎
A promise that fulfills when the promise returned by updateCallback fulfills, or rejects when it rejects.
</dd>
	<dd class="note">注記：
`~view遷移^cite ~APIは，
~DOM変更を包装して視覚的な遷移を作成するが、
遷移~animationの［
成功／失敗
］について~careすることなく，当の~DOM変更が［
起きたか否か, いつ起きたか
］を知ることだけ求まれるときもある。
`updateCallbackDone$m は、
そのような利用事例~用にある。
◎
Note: The View Transition API wraps a DOM change and creates a visual transition. However, sometimes you don’t care about the success/failure of the transition animation, you just want to know if and when the DOM change happens. updateCallbackDone is for that use-case.)
</dd>

	<dt>`viewTransition$V.`ready$m</dt>
	<dd>
<p>
この~promiseは：
◎
↓</p>
		<ul>
			<li>
遷移~用の疑似要素たちが作成され，~animationが開始しつつあるとき充足する。
◎
A promise that fulfills once the pseudo-elements for the transition are created, and the animation is about to start.
</li>
			<li>
遷移が始まり得ない場合には却下される。
`view-transition-name$p が重複しているなど，誤った環境設定に因り／
`updateCallbackDone$m が却下される~promiseを返した場合など。
◎
It rejects if the transition cannot begin. This can be due to misconfiguration, such as duplicate view-transition-names, or if updateCallbackDone returns a rejected promise.
</li>
		</ul>
	</dd>
	<dd>
`ready$m が充足される時点は、
`~view遷移~疑似要素$を `~Web~animation~API＠~WANIMapi#extensions-to-the-element-interface$cite で~animateする理想的な機会である。
◎
The point that ready fulfills is the ideal opportunity to animate the view transition pseudo-elements with the Web Animation API.
</dd>

	<dt>`viewTransition$V.`finished$m</dt>
	<dd>
<p>
この~promiseは：
◎
↓</p>
		<ul>
			<li>
終了~状態が全部的に可視になり，利用者からヤリトリ-可能になったなら充足される。
◎
A promise that fulfills once the end state is fully visible and interactive to the user.
</li>
			<li>
<p>
却下されるのは、
`updateCallback$V が却下される~promiseを返す場合に限られる
— それは、
終了~状態が作成されなかったことを指示するので。
◎
It only rejects if updateCallback returns a rejected promise, as this indicates the end state wasn’t created.
</p>

<p>
他の場合、［
遷移が始まるのに失敗したか
（ `skipTransition()$m により）飛ばされた
］場合でも，
終了~状態には到達するので充足する。
◎
Otherwise, if a transition fails to begin, or is skipped (by skipTransition()), the end state is still reached, so finished fulfills.
</p>
			</li>
		</ul>
	</dd>

	<dt>`viewTransition$V.`skipTransition$m()</dt>
	<dd>
遷移が開始されたなら即時に完遂させ，まだなら開始されないようにする。
◎
Immediately finish the transition, or prevent it starting.
</dd>
	<dd>
これにより `updateCallback$V が~callされなくなることは決してない
— ~DOM変更は、
遷移とは独立なので。
この原則についての詳細は、
`§ 増補としての遷移＠#transitions-as-enhancements$
見よ。
◎
This never prevents updateCallback being called, as the DOM change is independent of the transition. See § 1.4 Transitions as an enhancement for more details on this principle.
</dd>
	<dd>
`ready$m が解決される前に これが~callされた場合、
`ready$m は却下されることになる。
◎
If this is called before ready resolves, ready will reject.
</dd>
	<dd>
`finished$m が解決される前に これが~callされた場合、
`finished$m は `updateCallbackDone$m が決着するに伴い決着することになる。
◎
If finished hasn’t resolved, it will fulfill or reject along with updateCallbackDone.
</dd>
</dl>

<p>
各 `ViewTransition$I %~view遷移 は、
次に挙げるものを有する：
◎
A ViewTransition has the following:
</p>
<dl>
	<dt>
`有名~要素~群@vT
◎
named elements
</dt>
	<dd>
`有順序~map$
— 各~entryの
⇒＃
~keyは，`~view遷移~名$を与える。
値は，`捕捉された要素$を与える。
◎
a map, whose keys are view transition names and whose values are captured elements.＼
</dd>
	<dd>
初期~時は，新たな`有順序~map$とする。
◎
Initially a new map.
</dd>
	<dd class="note">注記：
これは、
`ViewTransition$I に結付けられるので，
`~view遷移を~clearする$が~callされたとき片付けられることになる。
◎
Note: Since this is associated to the ViewTransition, it will be cleaned up when Clear view transition is called.
</dd>

	<dt>
`相@vT
◎
phase
</dt>
	<dd>
次に挙げるいずれかをとり，
挙げられた順に（場合によっては，一部を飛ばして）進捗する
— 初期~時は `捕捉-待ち$i とする
⇒＃
`捕捉-待ち@i,
`更新~callbackは~call済み@i,
`~animate中@i,
`済み@i
◎
One of the following ordered phases, initially "pending-capture":
• "pending-capture".
• "update-callback-called".
• "animating".
• "done".
</dd>
	<dd class="note">注記：
これらの相は，自動的に進捗するので、
この~APIを利用している開発者【作者】は，
ほとんどにおいて どの相にあるか心配する必要はない。
しかしながら，どの手続きが どの相で起こるか
— ~snapshotは いつ捕捉され, 疑似要素~DOMは いつ作成されるか, 等々 —
を理解することは、
重要になる。
以下に与える各~相を成す記述は、［
仕様に準拠する実装を生産するために従うべき一義的な手続きが成す集合
］を実装者~向けに供する意図をもって，アリな限り精確であろうと試行する。
◎
Note: For the most part, a developer using this API does not need to worry about the different phases, since they progress automatically. It is, however, important to understand what steps happen in each of the phases: when the snapshots are captured, when pseudo-element DOM is created, etc. The description of the phases below tries to be as precise as possible, with an intent to provide an unambiguous set of steps for implementors to follow in order to produce a spec-compliant implementation.
</dd>

	<dt>
`更新~callback@vT
◎
update callback
</dt>
	<dd>
~NULL ／
ある `ViewTransitionUpdateCallback$I
◎
a ViewTransitionUpdateCallback or null.＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
Initially null.
</dd>

	<dt>
`準備済み時の~promise@vT
◎
ready promise
</dt>
	<dd>
`~promise$
◎
a Promise.＼
</dd>
	<dd>
初期~時は，次を遂行した結果になるとする
⇒
`新たな~promise$( %~view遷移 に`関連な~realm$ )
◎
Initially a new promise in this’s relevant Realm.
</dd>

	<dt>
`更新~callback済み時の~promise@vT
◎
update callback done promise
</dt>
	<dd>
`~promise$
◎
a Promise.＼
</dd>
	<dd>
初期~時は，次を遂行した結果になるとする
⇒
`新たな~promise$( %~view遷移 に`関連な~realm$ )
◎
Initially a new promise in this’s relevant Realm.
</dd>
	<dd class="note">注記：
［
`準備済み時の~promise$vT,
`更新~callback済み時の~promise$vT
］は即時に作成されるので、
却下は
— `取扱済みとして~markされ$ない限り，
`updateCallbackDone$m などの取得子に~accessされなかった場合でも —
`unhandledrejection$et を発火させることになる。
◎
Note: The ready promise and update callback done promise are immediately created, so rejections will cause unhandledrejections unless they’re handled, even if the getters such as updateCallbackDone are not accessed.
</dd>

	<dt>
`完遂-時の~promise@vT
◎
finished promise
</dt>
	<dd>
`~promise$
◎
a Promise.＼
</dd>
	<dd class="algo">
<p>
初期~時は，次を遂行した結果になるとする：
</p>
		<ol>
			<li>
%~promise ~LET `新たな~promise$( %~view遷移 に`関連な~realm$ )
</li>
			<li>
`~promiseを取扱済みとして~markする$( %~promise )
</li>
			<li>
~RET %~promise
</li>
		</ol>
◎
Initially a new promise in this’s relevant Realm, marked as handled.
</dd>
	<dd class="note">注記：
`unhandledrejection$et が重複して発火されるのを防止するため、
これは，`取扱済みとして~markされ$る。
この~promiseが却下されるのは、
`更新~callback済み時の~promise$vTが却下されるときに限られるので。
◎
Note: This is marked as handled to prevent duplicate unhandledrejections, as this promise only ever rejects along with the update callback done promise.
</dd>

	<dt>
`遷移~根~疑似要素@vT
◎
transition root pseudo-element
</dt>
	<dd>
ある `view-transition$pe
◎
a ::view-transition.＼
</dd>
	<dd>
初期~時は新たな `view-transition^pe とする。
◎
Initially a new ::view-transition.
</dd>

	<dt>
`初期~snapshot包含塊~size@vT
◎
initial snapshot containing block size
</dt>
	<dd>
~NULL ／
［
横幅, 縦幅
］を順に与える 2 個の実数が成す`~tuple$
◎
a tuple of two numbers (width and height), or null.＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
Initially null.
</dd>
	<dd class="note">注記：
これは、
`~snapshot包含塊の~size$における変化を検出するために利用される
— そのような変化が生じた場合、
遷移は`飛ばされ$る。
この挙動の論点は、
`8045$issue にある。
◎
Note: This is used to detect changes in the snapshot containing block size, which causes the transition to skip. Discussion of this behavior.
</dd>
</dl>

<div class="algo">
`finished@m
`取得子~手続き$は
⇒
~RET コレの`完遂-時の~promise$vT
◎
The finished getter steps are to return this’s finished promise.
</div>

<div class="algo">
`ready@m
`取得子~手続き$は
⇒
~RET コレの`準備済み時の~promise$vT
◎
The ready getter steps are to return this’s ready promise.
</div>

<div class="algo">
`updateCallbackDone@m
`取得子~手続き$は
⇒
~RET コレの`更新~callback済み時の~promise$vT
◎
The updateCallbackDone getter steps are to return this’s update callback done promise.
</div>

			<section id="ViewTransition-skipTransition">
<h4 title="skipTransition() Method Steps">6.2.1. `skipTransition()^m ~method手続き</h4>

<div class="algo">
<p>
`skipTransition()@m
`~method手続き$は：
◎
The method steps for skipTransition() are:
</p>
<ol>
	<li>
~IF［
コレの`相$vT ~NEQ `済み$i
］
⇒
`~view遷移を飛ばす$( コレ, "`AbortError$E" )
◎
If this’s phase is not "done", then skip the view transition for this with an "AbortError" DOMException.
</li>
</ol>
</div>

			</section>
		</section>
	</section>
	<section id="algorithms">
<h2 title="Algorithms">7. ~algo</h2>

		<section id="concepts">
<h3 title="Data Structures">7.1. ~data構造</h3>

			<section id="additions-to-document">
<h4 title="Additions to Document">7.1.1. `Document$I に対する追加</h4>

<p>
各 `文書$ %文書 は、
次に挙げるものを追加的に有する：
◎
A Document additionally has:
</p>
<dl class="def-list">
	<dt>
`作動中な~view遷移@doc
◎
active view transition
</dt>
	<dd>
~NULL ／
ある `ViewTransition$I
◎
a ViewTransition or null.＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
Initially null.
</dd>

	<dt>
`~view遷移~用の描画を抑止するか@doc
◎
rendering suppression for view transitions
</dt>
	<dd>
真偽値
◎
a boolean.＼
</dd>
	<dd>
初期~時は ~F とする。
◎
Initially false.
</dd>
	<dd>
~T をとる間は、
すべての~pointer接触判定は，
%文書 の`文書~要素$を~targetにするモノトスル
— 他の`要素$をすべて無視して。
◎
While a Document’s rendering suppression for view transitions is true, all pointer hit testing must target its document element, ignoring all other elements.
</dd>
	<dd class="note">注記：
これは、
`~pointer捕捉＠~POINTEREVENTS#dfn-pointer-capture$には影響しない。
◎
Note: This does not affect pointers that are captured.
</dd>
	<dd class="trans-note">【
何が “接触判定” を成すかは，
いくつかの仕様に言及されているが（`例＠~POINTEREVENTS#dfn-hit-test$）、
いずれも正式には定義していない。
】</dd>

	<dt>
`動的な~view遷移~stylesheet@doc
◎
dynamic view transition style sheet
</dt>
	<dd>
ある`~stylesheet＠~CSSSNAPSHOT#style-sheet$
◎
a style sheet.＼
</dd>
	<dd>
初期~時は、
`~UA出自$に属する新たな~stylesheetとする
— これは、
`大域的な~view遷移~UA~stylesheet$より後に順序されるとする。
◎
Initially a new style sheet in the user-agent origin, ordered after the global view transition user agent style sheet.
</dd>
	<dd class="note">注記：
これは、
遷移に関係している動的な~styleを保持するために利用される。
◎
Note: This is used to hold dynamic styles relating to transitions.
</dd>

	<dt>
`~view遷移~treeを示すか@doc
◎
show view transition tree
</dt>
	<dd>
真偽値
◎
A boolean.＼
</dd>
	<dd>
初期~時は ~F とする。
◎
Initially false.
</dd>
	<dd>
~T のときは、
%文書 にて`作動中な~view遷移$docの`遷移~根~疑似要素$vT %根 は、
その`出自の要素$である［
%文書 の`文書~要素$
］の`子$として描画される。
◎
When this is true, this’s active view transition’s transition root pseudo-element renders as a child of this’s document element, with this’s document element is its originating element.
</dd>
	<dd class="note">注記：
`文書~要素$の中での %根 の位置は問われない
— %根 の`包含塊$は，`~snapshot包含塊$になるので。
◎
Note: The position of the transition root pseudo-element within the document element does not matter, as the transition root pseudo-element’s containing block is the snapshot containing block.
</dd>

	<dt>
`更新~callback~queue@doc
◎
update callback queue
</dt>
	<dd>
ある`~list$
◎
A list,＼
</dd>
	<dd>
初期~時は空とする。
◎
initially empty.
</dd>
</dl>

			</section>
			<section id="elements-concept">
<h4 title="Additions to Elements">7.1.2. 要素に対する追加</h4>

<p>
各 `要素$は、
`ある~view遷移~内に捕捉されたか@el
を有する
— それは、
真偽値をとり，初期~時は ~F とする。
◎
Elements have a captured in a view transition boolean, initially false.
</p>

<p class="note">注記：
この仕様は、
~CSSによる
`要素@
の定義を利用する
— それは、
`疑似要素$も含む†。
◎
Note: This spec uses CSS’s definition of element, which includes pseudo-elements.
</p>

<p class="trans-note">【†
これを書いた時点で、
実際に，疑似要素を含むものと明示的に定義している仕様は無い
（各~仕様の中で，暗黙的に含んでいる箇所は、
いくつかあるとしても）
— 原文が参照している`要素＠https://drafts.csswg.org/css2/#element$も,
`CSS-DISPLAY-4$r に定義される`要素＠~CSSDISP#elements$も，
そのように定義されていない。
】【
本物の要素には定義されているが，
疑似要素~用には定義されていない概念（例：`~node文書$）は、
`最終的な出自の要素$に基づくものと解釈することになろう。
】</p>

			</section>
			<section id="captured-elements">
<h4 title="Captured elements">7.1.3. 捕捉された要素</h4>

<p>
`捕捉された要素@
は、
`構造体$であり，次に挙げる~itemを伴う：
◎
A captured element is a struct with the following:
</p>
<dl class="def-list">
	<dt>
`旧-画像@cE
◎
old image
</dt>
	<dd>
~NULL ／
ある~2D~bitmap
◎
an 2D bitmap or null.＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
Initially null.
</dd>

	<dt>
`旧-横幅@cE
◎
old width
</dt>
	<dt>
`旧-縦幅@cE
◎
old height
</dt>
	<dd>
`unrestricted double$c
【有限でない場合（ `NaN^jv や `Infinity^jv ）の挙動は指定されていない。】
◎
an unrestricted double,＼
</dd>
	<dd>
初期~時は 0 とする。
◎
initially zero.
</dd>

	<dt>
`旧-変形@cE
◎
old transform
</dt>
	<dd>
ある `transform-function$t
◎
a &lt;transform-function&gt;,＼
</dd>
	<dd>
初期~時は`恒等~変形-関数$とする。
◎
initially the identity transform function.
</dd>

	<dt>
`旧-書字~mode@cE
◎
old writing-mode
</dt>
	<dd>
~NULL ／
`writing-mode$p 用の値
◎
Null or a writing-mode,＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
initially null.
</dd>

	<dt>
`旧-方向@cE
◎
old direction
</dt>
	<dd>
~NULL ／
`direction$p 用の値
◎
Null or a direction,＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
initially null.
</dd>

	<dt>
`旧-~text方位@cE
◎
old text-orientation
</dt>
	<dd>
~NULL ／
`text-orientation$p 用の値
◎
Null or a text-orientation,＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
initially null.
</dd>

	<dt>
`旧-混色~mode@cE
◎
old mix-blend-mode
</dt>
	<dd>
~NULL ／
`mix-blend-mode$p 用の値
◎
Null or a mix-blend-mode,＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
initially null.
</dd>

	<dt>
`旧-後景~filter@cE
◎
old backdrop-filter
</dt>
	<dd>
~NULL ／ `backdrop-filter$p 用の値
◎
Null or a backdrop-filter,＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
initially null.
</dd>

	<dt>
`旧-色~scheme@cE
◎
old color-scheme
</dt>
	<dd>
~NULL ／ `color-scheme$p 用の値
◎
Null or a color-scheme,＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
initially null.
</dd>

	<dt>
`新-要素@cE
◎
new element
</dt>
	<dd>
~NULL ／
ある`要素$
◎
an element or null.＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
Initially null.
</dd>
</dl>

<p>
各`捕捉された要素$は、
`~style定義~群@cE
と総称される，次に挙げる~itemも伴う：
◎
In addition, a captured element has the following style definitions:
</p>
<dl class="def-list">
	<dt>
`~group~keyframe群@cE
◎
group keyframes
</dt>
	<dd>
~NULL ／
ある `CSSKeyframesRule$I
◎
A CSSKeyframesRule or null.＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
Initially null.
</dd>

	<dt>
`~group~animation名~規則@cE
◎
group animation name rule
</dt>
	<dd>
~NULL ／
ある `CSSStyleRule$I
◎
A CSSStyleRule or null.＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
Initially null.
</dd>

	<dt>
`~group~style規則@cE
◎
group styles rule
</dt>
	<dd>
~NULL ／
ある `CSSStyleRule$I
◎
A CSSStyleRule or null.＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
Initially null.
</dd>

	<dt>
`画像~pair隔離~規則@cE
◎
image pair isolation rule
</dt>
	<dd>
~NULL ／
ある `CSSStyleRule$I
◎
A CSSStyleRule or null.＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
Initially null.
</dd>

	<dt>
`画像~animation名~規則@cE
◎
image animation name rule
</dt>
	<dd>
~NULL ／
ある `CSSStyleRule$I
◎
A CSSStyleRule or null.＼
</dd>
	<dd>
初期~時は ~NULL とする。
◎
Initially null.
</dd>
</dl>

<p class="note">注記：
これらは、
`文書$の`動的な~view遷移~stylesheet$docを［
更新するため／
後でそこから~styleを除去するため
］に利用される。
◎
Note: These are used to update, and later remove styles from a document’s dynamic view transition style sheet.
</p>

			</section>
		</section>
		<section id="perform-pending-transition-operations-algorithm">
<h3 title="Perform pending transition operations">7.2. 処理待ち遷移~演算を遂行する</h3>

<p class="note">注記：
この~algoは、
`描画を更新する段＠~WAPI#update-the-rendering$ `HTML$r の中から呼出される。
◎
This algorithm is invoked as a part of update the rendering loop in the html spec.
</p>

<div class="algo">
<p>
`処理待ち遷移~演算を遂行する@
~algoは、
所与の
( `文書$ %文書 )
に対し：
◎
To perform pending transition operations given a Document document, perform the following steps:
</p>
<ol>
	<li>
%~view遷移 ~LET %文書 にて`作動中な~view遷移$doc
◎
↓</li>
	<li>
<p>
~IF［
%~view遷移 ~NEQ ~NULL
］：
◎
If document’s active view transition is not null, then:
</p>
		<ol>
			<li>
~IF［
%~view遷移 の`相$vT ~EQ `捕捉-待ち$i
］
⇒
`~view遷移を設定しておく$( %~view遷移 )
◎
If document’s active view transition’s phase is "pending-capture", then setup view transition for document’s active view transition.
</li>
			<li>
~ELIF［
%~view遷移 の`相$vT ~EQ `~animate中$i
］
⇒
`遷移~frameを取扱う$( %~view遷移 )
◎
Otherwise, if document’s active view transition’s phase is "animating", then handle transition frame for document’s active view transition.
</li>
		</ol>
	</li>
</ol>
</div>

		</section>
		<section id="setup-view-transition-algorithm">
<h3 title="Setup view transition">7.3. ~view遷移を設定しておく</h3>

<div class="algo">
<p>
`~view遷移を設定しておく@
~algoは、
所与の
( `ViewTransition$I %遷移 )
に対し：
◎
To setup view transition for a ViewTransition transition, perform the following steps:
</p>

<p class="note">注記：
この~algoは、
次を順に行う
⇒＃
文書を成す現在の状態を捕捉する,
遷移の `ViewTransitionUpdateCallback$I を~callする,
文書を成す新-状態を捕捉する
◎
Note: This algorithm captures the current state of the document, calls the transition’s ViewTransitionUpdateCallback, then captures the new state of the document.
</p>
<ol>
	<li>
%文書 ~LET %遷移 に`関連な大域~obj$に`結付けられた文書$
◎
Let document be transition’s relevant global object’s associated document.
</li>
	<li>
<p>
`更新~callback~queueを一掃する$( 【 %文書 】 )
◎
Flush the update callback queue.
</p>

<p class="note">注記：
これは、
次を確保する
⇒
他の飛ばされた遷移により~scheduleされた~DOMに対する変更は、
この遷移~用の旧-状態が捕捉される前に行われる。
◎
Note: this ensures that any changes to the DOM scheduled by other skipped transitions are done before the old state for this transition is captured.
</p>
	</li>
	<li>
%成否 ~LET `旧-状態を捕捉する$( %遷移 )
◎
Capture the old state for transition.
</li>
	<li>
~IF［
%成否 ~EQ `失敗^i
］
⇒＃
`~view遷移を飛ばす$( %遷移, "`InvalidStateError$E" )；
~RET
◎
If failure is returned, then skip the view transition for transition with an "InvalidStateError" DOMException in transition’s relevant Realm, and return.
</li>
	<li>
%文書 の`~view遷移~用の描画を抑止するか$doc ~SET ~T
◎
Set document’s rendering suppression for view transitions to true.
</li>
	<li>
<p>
`大域~taskを~queueする$( `~DOM操作~task~source$, %遷移 に`関連な大域~obj$, 次の手続き )
◎
Queue a global task on the DOM manipulation task source, given transition’s relevant global object,＼
↓ to perform the following steps:
</p>

<p class="note">注記：
ここで~taskを~queueするのは、［
`画像を捕捉する$ときに読み戻される `texture^en
］は，非同期cである場合もあるからである
— ~HTML仕様における描画-手続きは、
それは同期的であったかのように動作するが。
◎
Note: A task is queued here because the texture read back in capturing the image may be async, although the render steps in the HTML spec act as if it’s synchronous.
</p>
<div class="algo">
<p>
手続きは：
◎
↑</p>
		<ol>
			<li>
<p>
~IF［
%遷移 の`相$vT ~EQ `済み$i
］
⇒
~RET
◎
If transition’s phase is "done", then abort these steps.
</p>

<p class="note">注記：
これは、
この時点より前に %遷移 が`飛ばされ$た場合に起こる。
◎
Note: This happens if transition was skipped before this point.
</p>
			</li>
			<li>
`更新~callbackを~scheduleする$( %遷移 )
◎
schedule the update callback for transition.
</li>
			<li>
`更新~callback~queueを一掃する$( 【 %文書 】 )
◎
Flush the update callback queue.
</li>
		</ol>
</div>
	</li>
</ol>
</div>

<div class="algo">
<p>
`~view遷移を作動化する@
~algoは、
所与の
( `ViewTransition$I %遷移 )
に対し：
◎
To activate view transition for a ViewTransition transition, perform the following steps:
</p>
<ol>
	<li>
<p>
~IF［
%遷移 の`相$vT ~EQ `済み$i
］
⇒
~RET
◎
If transition’s phase is "done", then return.
</p>

<p class="note">注記：
これは、
この時点より前に %遷移 が`飛ばされ$た場合に起こる。
◎
Note: This happens if transition was skipped before this point.
</p>
	</li>
	<li>
%遷移 に`関連な大域~obj$に`結付けられた文書$の`~view遷移~用の描画を抑止するか$doc ~SET ~F
◎
Set transition’s relevant global object’s associated document’s rendering suppression for view transitions to false.
</li>
	<li>
~IF［
%遷移 の`初期~snapshot包含塊~size$vT ~NEQ `~snapshot包含塊の~size$
］
⇒＃
`~view遷移を飛ばす$( %遷移, "`InvalidStateError$E" )；
~RET
◎
If transition’s initial snapshot containing block size is not equal to the snapshot containing block size, then skip transition with an "InvalidStateError" DOMException in transition’s relevant Realm, and return.
</li>
	<li>
%成否 ~LET `新-状態を捕捉する$( %遷移 )
◎
Capture the new state for transition.
</li>
	<li>
~IF［
%成否 ~EQ `失敗^i
］
⇒＃
`~view遷移を飛ばす$( %遷移, "`InvalidStateError$E" )；
~RET
◎
If failure is returned, then skip transition with an "InvalidStateError" DOMException in transition’s relevant Realm, and return.
</li>
	<li>
<p>
%遷移 の`有名~要素~群$vTの`値~群$mapを成す
~EACH( %捕捉された要素 )
に対し：
</p>
		<ol>
			<li>
%新-要素 ~LET %捕捉された要素 の`新-要素$cE
</li>
			<li>
~IF［
%新-要素 ~EQ ~NULL
］
⇒
~CONTINUE
</li>
			<li>
%新-要素 の`ある~view遷移~内に捕捉されたか$el ~SET ~T
</li>
		</ol>
◎
For each capturedElement of transition’s named elements' values:
• If capturedElement’s new element is not null, then set capturedElement’s new element’s captured in a view transition to true.
</li>
	<li>
`遷移~疑似要素たちを設定しておく$( %遷移 )
◎
Setup transition pseudo-elements for transition.
</li>
	<li>
%成否 ~LET `疑似要素~styleを更新する$( %遷移 )
◎
Update pseudo-element styles for transition.
</li>
	<li>
<p>
~IF［
%成否 ~EQ `失敗^i
］
⇒＃
`~view遷移を飛ばす$( %遷移, "`InvalidStateError$E" )；
~RET
◎
If failure is returned, then skip the view transition for transition with an "InvalidStateError" DOMException in transition’s relevant Realm, and return.
</p>

<p class="note">注記：
上の手続きは、［
~style／~layout
］の間に計算される情報を算出するため，
文書~lifecycle相を走らす【？】ことを要求することになる。
◎
Note: The above steps will require running document lifecycle phases, to compute information calculated during style/layout.
</p>
	</li>
	<li>
%遷移 の`相$vT ~SET `~animate中$i
◎
Set transition’s phase to "animating".
</li>
	<li>
`~promiseを解決する$( %遷移 の`準備済み時の~promise$vT )
◎
Resolve transition’s ready promise.
</li>
</ol>
</div>

			<section id="capture-old-state-algorithm">
<h4 title="Capture the old state">7.3.1. 旧-状態を捕捉する</h4>

<div class="algo">
<p>
`旧-状態を捕捉する@
~algoは、
所与の
( `ViewTransition$I %遷移 )
に対し：
◎
To capture the old state for ViewTransition transition:
</p>
<ol>
	<li>
%文書 ~LET %遷移 に`関連な大域~obj$に`結付けられた文書$
◎
Let document be transition’s relevant global object’s associated document.
</li>
	<li>
%有名~要素~群 ~LET %遷移 の`有名~要素~群$vT
◎
Let namedElements be transition’s named elements.
</li>
	<li>
%捕捉~要素~群 ~LET 新たな`有順序~map$
◎
Let usedTransitionNames be a new set of strings.
◎
Let captureElements be a new list of elements.
</li>
	<li>
~IF［
`~snapshot包含塊の~size$は`実装定義$な最大を超過する
］
⇒
~RET `失敗^i
◎
If the snapshot containing block size exceeds an implementation-defined maximum, then return failure.
</li>
	<li>
%遷移 の`初期~snapshot包含塊~size$vT ~SET `~snapshot包含塊の~size$
◎
Set transition’s initial snapshot containing block size to the snapshot containing block size.
</li>
	<li>
<div>
<p>
~AND↓ を満たす
~EACH( `要素$ %要素 )
に対し…
</p>
		<ul>
			<li>
`接続されて$いる
</li>
			<li>
その`~node文書$ ~EQ %文書
</li>
			<li>
`平坦~tree$における その先祖として`内容を飛ばす$ものは無い
</li>
			<li>
その`文書~視野な~view遷移~名$ ~NEQ `none$v
</li>
			<li>
`描画され$る
</li>
			<li>
<p>
複数個の`~box断片$を有さない
</p>

<p class="note">注記：
将来~versionにおいては、
断片化された要素~用にも遷移を可能化するよう求まれるかもしれない。
`8900$issue を見よ。
</p>

<p class="note">注記：
ここでの`~box断片$は、
複数の`行l~box$にまたがる`行内~box$の断片化も参照rするものではない。
そのような行内は、
遷移に関与し得る。
</p>
			</li>
		</ul>
<p>
…に対し，`塗り順序$で：
</p>

<p class="note">注記：
塗り順序で反復するのは、［
その順序が【 %捕捉~要素~群 を介して】 %有名~要素~群 に~cacheされる
］ことを確保するためである。
この順序は、
`view-transition-group^pe 疑似要素~用の~DOM順序を定義する
— 塗り~stackの下端にある要素が，
`view-transition^pe の最初の子である疑似要素を生成するよう。
</p>
◎
For each element of every element that is connected, and has a node document equal to document, in paint order:
◎
We iterate in paint order to ensure that this order is cached in namedElements. This defines the DOM order for ::view-transition-group pseudo-elements, such that the element at the bottom of the paint stack generates the first pseudo child of ::view-transition.
• If any flat tree ancestor of this element skips its contents, then continue.
• If element has more than one box fragment, then continue.
• Note: We might want to enable transitions for fragmented elements in future versions. See #8900.
• Note: box fragment here does not refer to fragmentation of inline boxes across line boxes. Such inlines can participate in a transition.
• Let transitionName be the element’s document-scoped view transition name.
• If transitionName is none, or element is not rendered, then continue.
</div>
		<ol>
			<li>
%遷移~名 ~LET %要素 の`文書~視野な~view遷移~名$
◎
↑</li>
			<li>
<p>
~IF［
%捕捉~要素~群[ %遷移~名 ] ~NEQ ε
］：
◎
If usedTransitionNames contains transitionName, then:
</p>
				<ol>
					<li>
%捕捉~要素~群 の`値~群$mapを成す
~EACH( %値 )
に対し
⇒
%値 の`ある~view遷移~内に捕捉されたか$el ~SET ~F
◎
For each element in captureElements:
• Set element’s captured in a view transition to false.
</li>
					<li>
~RET `失敗^i
◎
return failure.
</li>
				</ol>
			</li>
			<li>
%要素 の`ある~view遷移~内に捕捉されたか$el ~SET ~T
◎
↓ Append transitionName to usedTransitionNames.
◎
Set element’s captured in a view transition to true.
</li>
			<li>
%捕捉~要素~群[ %遷移~名 ] ~SET %要素
◎
Append element to captureElements.
</li>
		</ol>

<p class="note">注記：
以下において，この~algoを別々な~loop内で継続するのは、
この捕捉に関与しているすべての要素に対し［
それらの`ある~view遷移~内に捕捉されたか$elが，
後の段において
【`画像を捕捉する$中で`描画~特性を捕捉する$ときに】
読取られる前に設定される
］ことを確保するためである。
◎
The algorithm continues in a separate loop to ensure that captured in a view transition is set on all elements participating in this capture before it is read by future steps in the algorithm.
</p>
	</li>
	<li>
<p>
%捕捉~要素~群 を成す
~EACH( %遷移~名 → %要素 )
に対し：
◎
For each element in captureElements:
</p>
		<ol>
			<li>
%捕捉 ~LET 新たな`捕捉された要素$
◎
Let capture be a new captured element struct.
</li>
			<li>
%捕捉 の`旧-画像$cE ~SET `画像を捕捉する$( %要素 )
◎
Set capture’s old image to the result of capturing the image of element.
</li>
			<li>
%元の矩形 ~LET ［
%要素 ~EQ %文書 の`文書~要素$ならば`~snapshot包含塊$／
~ELSE_ %要素 の`~border~box$
］
◎
Let originalRect be snapshot containing block if element is the document element, otherwise, the element’s border box.
</li>
			<li>
%捕捉 の`旧-横幅$cE ~SET %元の矩形 の `width$m
◎
Set capture’s old width to originalRect’s width.
</li>
			<li>
%捕捉 の`旧-縦幅$cE ~SET %元の矩形 の `height$m
◎
Set capture’s old height to originalRect’s height.
</li>
			<li>
%捕捉 の`旧-変形$cE ~SET 次を満たす変形を与える `transform-function$t
⇒
%要素 の`~border~box$を`~snapshot包含塊の原点$から `its^en【？】 現在の視覚的な位置へ対応付けることになる
◎
Set capture’s old transform to a &lt;transform-function&gt; that would map element’s border box from the snapshot containing block origin to its current visual position.
</li>
			<li>
%捕捉 の`旧-書字~mode$cE ~SET %要素 の `writing-mode$p の`算出d値$
◎
Set capture’s old writing-mode to the computed value of writing-mode on element.
</li>
			<li>
%捕捉 の`旧-方向$cE ~SET %要素 の `direction$p の`算出d値$
◎
Set capture’s old direction to the computed value of direction on element.
</li>
			<li>
%捕捉 の`旧-~text方位$cE ~SET %要素 の `text-orientation$p の`算出d値$
◎
Set capture’s old text-orientation to the computed value of text-orientation on element.
</li>
			<li>
%捕捉 の`旧-混色~mode$cE ~SET %要素 の `mix-blend-mode$p の`算出d値$
◎
Set capture’s old mix-blend-mode to the computed value of mix-blend-mode on element.
</li>
			<li>
%捕捉 の`旧-後景~filter$cE ~SET %要素 の `backdrop-filter$p の`算出d値$
◎
Set capture’s old backdrop-filter to the computed value of backdrop-filter on element.
</li>
			<li>
%捕捉 の`旧-色~scheme$cE ~SET %要素 の `color-scheme$p の`算出d値$
◎
Set capture’s old color-scheme to the computed value of color-scheme on element.
</li>
			<li>
%有名~要素~群[ %遷移~名 ] ~SET %捕捉
◎
Let transitionName be the computed value of view-transition-name for element.
◎
Set namedElements[transitionName] to capture.
</li>
		</ol>
	</li>
	<li>
%捕捉~要素~群 の`値~群$mapを成す
~EACH( %要素 )
に対し
⇒
%要素 の`ある~view遷移~内に捕捉されたか$el ~SET ~F
◎
For each element in captureElements:
• Set element’s captured in a view transition to false.
</li>
	<li>
~RET `成功^i
◎
↑↑</li>
</ol>
</div>

			</section>
			<section id="capture-new-state-algorithm">
<h4 title="Capture the new state">7.3.2. 新-状態を捕捉する</h4>

<div class="algo">
<p>
`新-状態を捕捉する@
~algoは、
所与の
( `ViewTransition$I %遷移 )
に対し：
◎
To capture the new state for ViewTransition transition:
</p>
<ol>
	<li>
%文書 ~LET %遷移 に`関連な大域~obj$に`結付けられた文書$
◎
Let document be transition’s relevant global object’s associated document.
</li>
	<li>
%有名~要素~群 ~LET %遷移 の`有名~要素~群$vT
◎
Let namedElements be transition’s named elements.
</li>
	<li>
%遷移~名~群 ~LET 新たな`集合$【！ of strings】
◎
Let usedTransitionNames be a new set of strings.
</li>
	<li>
<div>
<p>
~AND↓ を満たす
~EACH( `要素$ %要素 )
に対し…
</p>
		<ul>
			<li>
`接続されて$いる
</li>
			<li>
その`~node文書$ ~EQ %文書
</li>
			<li>
`平坦~tree$における その先祖として`内容を飛ばす$ものは無い
</li>
			<li>
その`文書~視野な~view遷移~名$ ~NEQ `none$v
</li>
			<li>
`描画され$る
</li>
			<li>
複数個の`~box断片$を有さない
</li>
		</ul>
<p>
…に対し，`塗り順序$で：
</p>
◎
For each element of every element that is connected, and has a node document equal to document, in paint order:
• If any flat tree ancestor of this element skips its contents, then continue.
• Let transitionName be element’s document-scoped view transition name.
• If transitionName is none, or element is not rendered, then continue.
• If element has more than one box fragment, then continue.
</div>
		<ol>
			<li>
%遷移~名 ~LET %要素 の`文書~視野な~view遷移~名$
◎
↑</li>
			<li>
~IF［
%遷移~名 ~IN %遷移~名~群
］
⇒
~RET `失敗^i
◎
If usedTransitionNames contains transitionName, then return failure.
</li>
			<li>
%遷移~名~群 に %遷移~名 を`付加する$set
◎
Append transitionName to usedTransitionNames.
</li>
			<li>
<p>
~IF［
%有名~要素~群[ %遷移~名 ] ~EQ ε
］
⇒
%有名~要素~群[ %遷移~名 ] ~SET 新たな`捕捉された要素$
◎
If namedElements[transitionName] does not exist, then set namedElements[transitionName] to a new captured element struct.
</p>

<p class="note">注記：
この構造体を %有名~要素~群【！this ordered map】 の終端に追加するのは意図的である。
これは、
新-~DOM内にしか存在しない名前
【† `view-transition-name$p に当の名前を指定した要素（以下同様）】
（入口~animation）たちは，［
旧-~DOM内の名前（出口~animation）,
両~DOM内の名前（~pairにされた~animation）
］すべての上層にしか塗られないことを含意する【！誤 than → that】。
このような層の重ね方は、
事例によっては~~正しいとは言えないかもしれない。
`8941$issue を見よ。
◎
Note: We intentionally add this struct to the end of this ordered map. This implies than names which only exist in the new DOM (entry animations) will be painted on top of names only in the old DOM (exit animations) and names in both DOMs (paired animations). This might not be the right layering for all cases. See issue 8941.
</p>
			</li>
			<li>
%有名~要素~群[ %遷移~名 ] の`新-要素$cE ~SET %要素
◎
Set namedElements[transitionName]'s new element to element.
</li>
		</ol>
	</li>
	<li>
~RET `成功^i
◎
↑↑</li>
</ol>
</div>

			</section>
			<section id="setup-transition-pseudo-elements-algorithm">
<h4 title="Setup transition pseudo-elements">7.3.3. 遷移~疑似要素たちを設定しておく</h4>

<div class="algo">
<p>
`遷移~疑似要素たちを設定しておく@
~algoは、
所与の
( `ViewTransition$I %遷移 )
に対し：
◎
To setup transition pseudo-elements for a ViewTransition transition:
</p>

<p class="note">注記：
この~algoは、
遷移~用に疑似要素~treeを構築して，それらの初期~styleを生成する。
疑似要素~treeを成す構造は、
より高い~levelでは
`§ ~view遷移~用の疑似要素＠#view-transition-pseudos$が受持つ。
◎
Note: This algorithm constructs the pseudo-element tree for the transition, and generates initial styles. The structure of the pseudo-tree is covered at a higher level in § 3.2 View Transition Pseudo-elements.
</p>
<ol>
	<li>
%文書 ~LET コレに`関連な大域~obj$に`結付けられた文書$
◎
Let document be this’s relevant global object’s associated document.
</li>
	<li>
%文書 の`~view遷移~treeを示すか$doc ~SET ~T
◎
Set document’s show view transition tree to true.
</li>
	<li>
<p>
%遷移 の`有名~要素~群$vTを成す
~EACH( %遷移~名 → %捕捉された要素 )
に対し：
◎
For each transitionName → capturedElement of transition’s named elements:
</p>
		<ol>
			<li>
%~group ~LET 新たな `view-transition-group()$pe
— その
⇒＃
`~view遷移~名$ ~SET %遷移~名
◎
Let group be a new ::view-transition-group(), with its view transition name set to transitionName.
</li>
			<li>
%遷移 の`遷移~根~疑似要素$vTに【その子として】 %~group を付加する
◎
Append group to transition’s transition root pseudo-element.
</li>
			<li>
%画像~pair ~LET 新たな `view-transition-image-pair()$pe
— その
⇒＃
`~view遷移~名$ ~SET %遷移~名
◎
Let imagePair be a new ::view-transition-image-pair(), with its view transition name set to transitionName.
</li>
			<li>
%~group に【その子として】 %画像~pair を付加する
◎
Append imagePair to group.
</li>
			<li>
<p>
~IF［
%捕捉された要素 の`旧-画像$cE ~NEQ ~NULL
］：
◎
If capturedElement’s old image is not null, then:
</p>
				<ol>
					<li>
%旧- ~LET 新たな `view-transition-old()$pe
— その
⇒＃
`~view遷移~名$ ~SET %遷移~名,
`置換され$る内容 ~SET %捕捉された要素 の`旧-画像$cE
◎
Let old be a new ::view-transition-old(), with its view transition name set to transitionName, displaying capturedElement’s old image as its replaced content.
</li>
					<li>
%画像~pair に【その子として】 %旧- を付加する
◎
Append old to imagePair.
</li>
				</ol>
			</li>
			<li>
<p>
~IF［
%捕捉された要素 の`新-要素$cE ~NEQ ~NULL
］：
◎
If capturedElement’s new element is not null, then:
</p>
				<ol>
					<li>
<p>
%新- ~LET 新たな `view-transition-new()$pe
— その
⇒＃
`~view遷移~名$ ~SET %遷移~名
◎
Let new be a new ::view-transition-new(), with its view transition name set to transitionName.
</p>

<p class="note">注記：
この疑似要素の~style付けは、
`疑似要素~styleを更新する$ときに取扱われる。
◎
Note: The styling of this pseudo is handled in update pseudo-element styles.
</p>
					</li>
					<li>
%画像~pair に【その子として】 %新- を付加する
◎
Append new to imagePair.
</li>
				</ol>
			</li>
			<li>
<p>
~IF［
%捕捉された要素 の`旧-画像$cE ~EQ ~NULL
］：
◎
If capturedElement’s old image is null, then:
</p>
				<ol>
					<li>
~Assert：
%捕捉された要素 の`新-要素$cE ~NEQ ~NULL
◎
Assert: capturedElement’s new element is not null.
</li>
					<li>
%捕捉された要素 の`画像~animation名~規則$cE ~SET ［
下に与える~CSS
］を表現している新たな `CSSStyleRule$I
◎
Set capturedElement’s image animation name rule to a new CSSStyleRule representing the following CSS,＼
</li>
					<li>
%文書 の`動的な~view遷移~stylesheet$docに［
下に与える~CSS
］を付加する
◎
and append it to document’s dynamic view transition style sheet:
</li>
				</ol>
<p>
上で利用される~CSSは：
◎
↑</p>

<pre class="lang-css">
:root::view-transition-new(%遷移~名) {
  animation-name: -ua-view-transition-fade-in;
}
</pre>

<p class="note">注記：
この~CSSは、
置換されることになる変数を包含する。
◎
Note: The above code example contains variables to be replaced.
</p>
			</li>
			<li>
<p>
~IF［
%捕捉された要素 の`新-要素$cE ~EQ ~NULL
］：
◎
If capturedElement’s new element is null, then:
</p>
				<ol>
					<li>
~Assert：
%捕捉された要素 の`旧-画像$cE ~NEQ ~NULL
◎
Assert: capturedElement’s old image is not null.
</li>
					<li>
%捕捉された要素 の`画像~animation名~規則$cE ~SET ［
下に与える~CSS
］を表現している新たな `CSSStyleRule$I
◎
Set capturedElement’s image animation name rule to a new CSSStyleRule representing the following CSS,＼
</li>
					<li>
%文書 の`動的な~view遷移~stylesheet$docに［
下に与える~CSS
］を付加する
◎
and append it to document’s dynamic view transition style sheet:
</li>
				</ol>

<p>
上で利用される~CSSは：
◎
↑</p>

<pre class="lang-css">
:root::view-transition-old(%遷移~名) {
  animation-name: -ua-view-transition-fade-out;
}
</pre>

<p class="note">注記：
この~CSSは、
置換されることになる変数を包含する。
◎
Note: The above code example contains variables to be replaced.
</p>
			</li>
			<li>
<p>
~IF［
%捕捉された要素 の`旧-画像$cE ~NEQ ~NULL
］~AND［
`新-要素$cE ~NEQ ~NULL
］：
◎
If both of capturedElement’s old image and new element are not null, then:
</p>
				<ol>
					<li>
%変形 ~LET %捕捉された要素 の`旧-変形$cE
◎
Let transform be capturedElement’s old transform.
</li>
					<li>
%横幅 ~LET %捕捉された要素 の`旧-横幅$cE
◎
Let width be capturedElement’s old width.
</li>
					<li>
%縦幅 ~LET %捕捉された要素 の`旧-縦幅$cE
◎
Let height be capturedElement’s old height.
</li>
					<li>
%後景~filter ~LET %捕捉された要素 の`旧-後景~filter$cE
◎
Let backdropFilter be capturedElement’s old backdrop-filter.
</li>
					<li>
<p>
：
</p>
						<ol>
							<li>
%捕捉された要素 の`~group~keyframe群$cE ~SET ［
下に与える~CSS
］を表現している新たな `CSSKeyframesRule$I
◎
Set capturedElement’s group keyframes to a new CSSKeyframesRule representing the following CSS,＼
</li>
							<li>
%文書 の`動的な~view遷移~stylesheet$docに［
下に与える~CSS
］を付加する
◎
and append it to document’s dynamic view transition style sheet:
</li>
						</ol>

<p>
上で利用される~CSSは：
◎
↑</p>

<pre class="lang-css">
@keyframes -ua-view-transition-group-anim-%遷移~名 {
  from {
    transform: %変形;
    width: %横幅;
    height: %縦幅;
    backdrop-filter: %後景~filter;
  }
}
</pre>

<p class="note">注記：
この~CSSは、
置換されることになる変数を包含する。
◎
Note: The above code example contains variables to be replaced.
</p>
					</li>
					<li>
<p>
：
</p>
						<ol>
							<li>
%捕捉された要素 の`~group~animation名~規則$cE ~SET ［
下に与える~CSS
］を表現している新たな `CSSStyleRule$I
◎
Set capturedElement’s group animation name rule to a new CSSStyleRule representing the following CSS,＼
</li>
							<li>
%文書 の`動的な~view遷移~stylesheet$docに［
下に与える~CSS
］を付加する
◎
and append it to document’s dynamic view transition style sheet:
</li>
						</ol>

<p>
上で利用される~CSSは：
◎
↑</p>

<pre class="lang-css">
:root::view-transition-group(%遷移~名) {
  animation-name: -ua-view-transition-group-anim-%遷移~名;
}
</pre>

<p class="note">注記：
この~CSSは、
置換されることになる変数を包含する。
◎
Note: The above code example contains variables to be replaced.
</p>
					</li>
					<li>
<p>
：
</p>
						<ol>
							<li>
%捕捉された要素 の`画像~pair隔離~規則$cE ~SET ［
下に与える~CSS
］を表現している新たな `CSSStyleRule$I
◎
Set capturedElement’s image pair isolation rule to a new CSSStyleRule representing the following CSS,＼
</li>
							<li>
%文書 の`動的な~view遷移~stylesheet$docに［
下に与える~CSS
］を付加する
◎
and append it to document’s dynamic view transition style sheet:
</li>
						</ol>
<p>
上で利用される~CSSは：
◎
↑</p>

<pre class="lang-css">
:root::view-transition-image-pair(%遷移~名) {
  isolation: isolate;
}
</pre>

<p class="note">注記：
この~CSSは、
置換されることになる変数を包含する。
◎
Note: The above code example contains variables to be replaced.
</p>
					</li>
					<li>
<p>
：
</p>
						<ol>
							<li>
%捕捉された要素 の`画像~animation名~規則$cE ~SET ［
下に与える~CSS
］を表現している新たな `CSSStyleRule$I
◎
Set capturedElement’s image animation name rule to a new CSSStyleRule representing the following CSS,＼
</li>
							<li>
%文書 の`動的な~view遷移~stylesheet$docに［
下に与える~CSS
］を付加する
◎
and append it to document’s dynamic view transition style sheet:
</li>
						</ol>
<p>
上で利用される~CSSは：
◎
↑</p>

<pre class="lang-css">
:root::view-transition-old(%遷移~名) {
  animation-name: -ua-view-transition-fade-out, -ua-mix-blend-mode-plus-lighter;
}
:root::view-transition-new(%遷移~名) {
  animation-name: -ua-view-transition-fade-in, -ua-mix-blend-mode-plus-lighter;
}
</pre>

<p class="note">注記：
この~CSSは、
置換されることになる変数を包含する。
◎
Note: The above code example contains variables to be replaced.
</p>

<p class="note">注記：
`mix-blend-mode$p 用の値 `plus-lighter$v は、
旧-画像と新-画像において色~値が一致する画素を混色した結果が~~元と同じになり，
“正しい” ~cross-fadeを達成することを確保する。
◎
Note: mix-blend-mode: plus-lighter ensures that the blending of identical pixels from the old and new images results in the same color value as those pixels, and achieves a “correct” cross-fade.
</p>
					</li>
				</ol>
			</li>
		</ol>
	</li>
</ol>
</div>

			</section>
		</section>
		<section id="call-dom-update-callback-algorithm">
<h3 title="Call the update callback">7.4. 更新~callbackを~callする</h3>

<div class="algo">
<p>
`更新~callbackを~callする@
~algoは、
所与の
( `ViewTransition$I %遷移 )
に対し：
◎
To call the update callback of a ViewTransition transition:
</p>
<p class="note">注記：
これは、
どの `ViewTransition$I にも起こることが保証される
— 当の遷移が`飛ばされ$た場合でも。
その理由は、
`§ 増補としての遷移＠#transitions-as-enhancements$
にて論じられる。
◎
Note: This is guaranteed to happen for every ViewTransition, even if the transition is skipped. The reasons for this are discussed in § 1.4 Transitions as an enhancement.
</p>
<ol>
	<li>
~Assert：
%遷移 の`相$vT ~IN { `済み$i, `捕捉-待ち$i【！before "update-callback-called"】 }
◎
Assert: transition’s phase is "done", or before "update-callback-called".
</li>
	<li>
~IF［
%遷移 の`相$vT ~NEQ `済み$i
］
⇒
%遷移 の`相$vT ~SET `更新~callbackは~call済み$i
◎
If transition’s phase is not "done", then set transition’s phase to "update-callback-called".
</li>
	<li>
%~callback~promise ~LET ~NULL
◎
Let callbackPromise be null.
</li>
	<li>
~IF［
%遷移 の`更新~callback$vT ~EQ ~NULL
］
⇒
%~callback~promise ~SET `解決される~promise$( `undefined^jv, %遷移 に`関連な~realm$ )
◎
If transition’s update callback is null, then set callbackPromise to a promise resolved with undefined, in transition’s relevant Realm.
</li>
	<li>
~ELSE
⇒
%~callback~promise ~SET `~callback関数を呼出す$( %遷移 の`更新~callback$vT, « » )
◎
Otherwise, set callbackPromise to the result of invoking transition’s update callback.
</li>
	<li class="algo">
<p>
%充足-手続き ~LET 次を走らす手続き：
◎
Let fulfillSteps be to following steps:
</p>
		<ol>
			<li>
`~promiseを解決する$( %遷移 の`更新~callback済み時の~promise$vT )
◎
Resolve transition’s update callback done promise with undefined.
</li>
			<li>
`~view遷移を作動化する$( %遷移 )
◎
Activate transition.
</li>
		</ol>
	</li>
	<li class="algo">
<p>
%却下-手続き ~LET 所与の
( %事由 )
に対し，次を走らす手続き:
◎
Let rejectSteps be the following steps given reason:
</p>
		<ol>
			<li>
`~promiseを却下する$( %遷移 の`更新~callback済み時の~promise$vT, %事由 )
◎
Reject transition’s update callback done promise with reason.
</li>
			<li>
<p>
~IF［
%遷移 の`相$vT ~EQ `済み$i
］
⇒
~RET
◎
If transition’s phase is "done", then return.
</p>

<p class="note">注記：
これは、
この時点より前に %遷移 が`飛ばされ$た場合に起こる。
◎
Note: This happens if transition was skipped before this point.
</p>
			</li>
			<li>
<p>
`~promiseを取扱済みとして~markする$( %遷移 の`準備済み時の~promise$vT )
◎
Mark as handled transition’s ready promise.
</p>

<p class="note">注記：
%遷移 の`更新~callback済み時の~promise$vTは、
`unhandledrejection$et ~eventを発火することになる。
この段は、
この~eventが重複して発火されるのを避ける。
◎
Note: transition’s update callback done promise will provide the unhandledrejection. This step avoids a duplicate.
</p>
			</li>
			<li>
`~view遷移を飛ばす$( %遷移, ~NULL, %事由 )
◎
Skip the view transition transition with reason.
</li>
		</ol>
	</li>
	<li>
`~promiseに反応する$( %~callback~promise )
— 次を与える下で
⇒＃
`充足~手続き^i ~SET %充足-手続き,
`却下~手続き^i ~SET %却下-手続き
◎
React to callbackPromise with fulfillSteps and rejectSteps.
</li>
	<li class="algo">
<p>
ある制限時間~後に，遷移を飛ばすときは、
~UAは，次の手続きを`並列的$に遂行してもヨイ：
◎
To skip a transition after a timeout, the user agent may perform the following steps in parallel:
</p>
		<ol>
			<li>
実装定義な`所要時間$だけ待機する
◎
Wait for an implementation-defined duration.
</li>
			<li>
<p>
`大域~taskを~queueする$( `~DOM操作~task~source$, %遷移 に`関連な大域~obj$, 次の手続き )
◎
Queue a global task on the DOM manipulation task source, given transition’s relevant global object, to perform＼
</p>

<div class="algo">
<p>
手続きは：
◎
the following steps:
</p>
				<ol>
					<li>
<p>
~IF［
%遷移 の`相$vT ~EQ `済み$i
］
⇒
~RET
◎
If transition’s phase is "done", then return.
</p>

<p class="note">注記：
これは、
この時点より前に %遷移 が`飛ばされ$た場合に起こる。
◎
Note: This happens if transition was skipped before this point.
</p>
					</li>
					<li>
`~view遷移を飛ばす$( %遷移, "`TimeoutError$E" )
◎
Skip transition with a "TimeoutError" DOMException.
</li>
				</ol>
</div>
			</li>
		</ol>
	</li>
</ol>
</div>

<div class="algo">
<p>
`更新~callbackを~scheduleする@
~algoは、
所与の
( `ViewTransition$I %遷移 )
に対し：
◎
To schedule the update callback given a ViewTransition transition:
</p>
<ol>
	<li>
%大域~obj ~LET %遷移 に`関連な大域~obj$
◎
↓</li>
	<li>
%文書 ~LET %大域~obj に`結付けられた文書$
◎
↓</li>
	<li>
<p>
%文書 †の`更新~callback~queue$docに %遷移 を`付加する$
</p>

<p class="trans-note">【†
原文には %文書 に代えて “%遷移 に`関連な設定群~obj$” と記されているが、
更新~callback~queueは`文書$に結付けられるので，誤りであろう。
】</p>
◎
Append transition to transition’s relevant settings object’s update callback queue.
</li>
	<li>
<p>
`大域~taskを~queueする$( `~DOM操作~task~source$, %大域~obj, 次の手続き )
◎
Queue a global task on the DOM manipulation task source, given transition’s relevant global object, to＼
</p>

<div class="algo">
手続きは
⇒
`更新~callback~queueを一掃する$( 【 %文書 】 )
◎
flush the update callback queue.
</div>
	</li>
</ol>
</div>

<div class="algo">
<p>
`更新~callback~queueを一掃する@
~algoは、
所与の
( `文書$ %文書 )
に対し：
◎
To flush the update callback queue given a Document document:
</p>
<ol>
	<li>
%文書 の`更新~callback~queue$docを成す
~EACH( %遷移 )
に対し
⇒
`更新~callbackを~callする$( %遷移 )
◎
For each transition in document’s update callback queue, call the update callback given transition.
</li>

	<li>
%文書 の`更新~callback~queue$doc ~SET 空な`~list$【を`空にする$？】
◎
Set document’s update callback queue to an empty list.
</li>
</ol>
</div>

		</section>
		<section id="skip-the-view-transition-algorithm">
<h3 title="Skip the view transition">7.5. ~view遷移を飛ばす</h3>

<div class="algo">
<p>
`~view遷移を飛ばす@
~algoは、
所与の
( `ViewTransition$I %遷移, ［
文字列／~NULL
］ %例外~名, %事由 （省略時は ε ） )
に対し：
◎
To skip the view transition for ViewTransition transition with reason reason:
</p>
<ol>
	<li>
<p>
~IF［
%例外~名 ~NEQ ~NULL
］
⇒
%事由 ~SET %遷移 に`関連な~realm$に属する新たな`例外$
— その
⇒＃
`名前$eX ~SET %例外~名
</p>

<p class="trans-note">【
この段と次の段, および %例外~名 引数は、
~realmに関する取扱いを集約するための，この訳による追加。
】</p>
	</li>
	<li>
~Assert：
%事由 ~NEQ ε
</li>
	<li>
%文書 ~LET %遷移 に`関連な大域~obj$に`結付けられた文書$
◎
Let document be transition’s relevant global object’s associated document.
</li>
	<li>
~Assert：
%遷移 の`相$vT ~NEQ `済み$i
◎
Assert: transition’s phase is not "done".
</li>
	<li>
~IF［
%遷移 の`相$vT ~EQ `捕捉-待ち$i【！before "update-callback-called"】
］
⇒
`更新~callbackを~scheduleする$( %遷移 )
◎
If transition’s phase is before "update-callback-called", then schedule the update callback for transition.
</li>
	<li>
`~view遷移~用の描画を抑止するか$doc ~SET ~F
◎
Set rendering suppression for view transitions to false.
</li>
	<li>
~IF［
%文書 にて`作動中な~view遷移$doc ~EQ %遷移
］
⇒
`~view遷移を~clearする$( %遷移 )
◎
If document’s active view transition is transition, Clear view transition transition.
</li>
	<li>
%遷移 の`相$vT ~SET `済み$i
◎
Set transition’s phase to "done".
</li>
	<li>
<p>
`~promiseを却下する$( %遷移 の`準備済み時の~promise$vT, %事由 )
◎
Reject transition’s ready promise with reason.
</p>

<p class="note">注記：
~animationを開始した後に `skipTransition()$m が~callされた場合、
`準備済み時の~promise$vTは，この時点ですでに解決-済みかもしれない。
その事例では、
この段は何もしない。
◎
Note: The ready promise may already be resolved at this point, if skipTransition() is called after we start animating. In that case, this step is a no-op.
</p>
	</li>
	<li>
<p>
%結果 ~LET `~promiseに反応する$( %遷移 の`更新~callback済み時の~promise$vT )
— 次を与える下で：
◎
Resolve transition’s finished promise with the result of reacting to transition’s update callback done promise:
</p>
		<ul>
			<li class="algo">
`充足~手続き^i は
⇒
~RET `undefined^jv
◎
If the promise was fulfilled, then return undefined.
</li>
		</ul>

<p class="note">注記：
%遷移 の`更新~callback済み時の~promise$vTの却下は，ここでは明示的に取扱われないので、
%遷移 の`更新~callback済み時の~promise$vTが却下された場合，
%遷移 の`完遂-時の~promise$vTが同じ事由で却下されることになる。
◎
Note: Since the rejection of transition’s update callback done promise isn’t explicitly handled here, if transition’s update callback done promise rejects, then transition’s finished promise will reject with the same reason.
</p>
	</li>
	<li>
`~promiseを解決する$( %遷移 の`完遂-時の~promise$vT, %結果 )
◎
↑</li>
</ol>
</div>

		</section>
		<section id="page-visibility-change-steps">
<h3 title="View transition page-visibility change steps">7.6. ~view遷移の~page可視性~変化-時の手続き</h3>

<div class="algo">
<p>
`~view遷移の~page可視性~変化-時の手続き@
は、
所与の
( `文書$ %文書 )
に対し：
◎
The view transition page-visibility change steps given Document document are:
</p>
<ol>
	<li>
<p>
`大域~taskを~queueする$( `~DOM操作~task~source$, %文書 に`関連な大域~obj$, 次の手続き )
◎
Queue a global task on the DOM manipulation task source, given document’s relevant global object, to perform＼
</p>

<div class="algo">
<p>
手続きは：
◎
the following steps:
</p>
		<ol>
			<li>
%~view遷移 ~LET %文書 にて`作動中な~view遷移$doc
◎
↓</li>
			<li>
~IF［
%文書 の`可視性~状態$doc ~EQ `hidden^l
］
⇒
~IF［
%~view遷移 ~NEQ ~NULL
］
⇒
`~view遷移を飛ばす$( %~view遷移, "`InvalidStateError$E" )
◎
If document’s visibility state is "hidden", then:
• If document’s active view transition is not null, then skip document’s active view transition with an "InvalidStateError" DOMException.
</li>
			<li>
~ELSE
⇒
~Assert：
%~view遷移 ~EQ ~NULL
◎
Otherwise, assert: active view transition is null.
</li>
		</ol>
</div>
	</li>
</ol>

<p class="note">注記：
これは、
~HTML仕様から~callされる。
◎
Note: this is called from the HTML spec.
</p>
</div>

		</section>
		<section id="capture-the-image-algorithm">
<h3 title="Capture the image">7.7. 画像を捕捉する</h3>

<div class="algo">
<p>
`画像を捕捉する@
~algoは、
所与の
( `要素$ %要素 )
に対し，ある画像を返す：
◎
To capture the image given an element element, perform the following steps. They return an image.
</p>
<ol>
	<li>
%文書 ~LET %要素 の`~node文書$
【この段は、以下を明確化するための，この訳による補完。】
</li>
	<li>
<p>
~IF［
%要素 ~EQ %文書 の`文書~要素$
］：
◎
If element is the document element, then:
</p>
		<ol>
			<li>
%~canvas ~LET ~sizeが`~snapshot包含塊$の~sizeに等しい，透明な~canvas
◎
↓</li>
			<li>
<p>
%文書 が成す領域
（ %文書 の［
`~canvas背景$, `上端~層$を成す内容
］も含む）
のうち`~snapshot包含塊$と交差する部分を %~canvas 上に描画する
— ［
%要素 の`描画~特性を捕捉する$
］かつ［
次に挙げる追加的な特性に従う
］下で：
◎
Render the region of document (including its canvas background and any top layer content) that intersects the snapshot containing block, on a transparent canvas the size of the snapshot containing block, following the capture rendering characteristics, and these additional characteristics:
</p>
				<ul>
					<li>
<p>
%要素 の`~scrollされる~box$の外側にある区画は、
`~layout表示域$を［
移動する／~resizeする
］ことなく~scrollされたかのように描画するベキである。
これは、［
~scrollする／~resizeする
］ことに関係する~event
— `IntersectionObserver$I など —
を誘発しないモノトスル。
◎
Areas outside element’s scrolling box should be rendered as if they were scrolled to, without moving or resizing the layout viewport. This must not trigger events related to scrolling or resizing, such as IntersectionObservers.
</p>

<figure>
<div class="side-by-side">
<p class="alt" hidden id="_dgm-phone-browser-with-url">
あるスマホ~browserの~UIwindowは、［
~URL~bar,
その直下に`固定的に位置され$た要素,
その下に~page内容
］を示している。
~scrollbarは、
~pageが有意に~scrollされたことを指示する。
◎
A phone browser window, showing a URL bar, a fixed-position element directly beneath it, and some page content beneath that. A scroll bar indicates the page has been scrolled significantly.
</p>
<p class="alt" hidden id="_dgm-phone-browser-without-url">
捕捉された~snapshot。
それは、
~URL~barの奥にある内容が捕捉~内に含まれたことを示す。
◎
The captured snapshot. It shows that content beneath the URL bar was included in the capture.
</p>
</div>
<figcaption>
捕捉された~snapshotと利用者に見えるものを比較した例。
この例は、
遷移~名を伴う要素は根しか無いと見做す。
◎
An example of what the user sees compared to the captured snapshot. This example assumes the root is the only element with a transition name.
</figcaption></figure>
					</li>
					<li>
<p>
~scrollし得ない区画
（~scroll限界域の外にある区画）
には、
`~canvas背景$を描画するベキである。
◎
Areas that cannot be scrolled to (i.e. they are out of scrolling bounds), should render the canvas background.
</p>

<figure>
<div class="side-by-side">
<p class="alt" hidden id="_dgm-phone-browser-scrolled-to-top-with-url">
あるスマホ~browserの~UIwindowは、
~URL~barと その下にある内容を示している。
~scrollbarは、
~pageが上端へ~scrollされたことを指示する。
◎
A phone browser window, showing a URL bar, and some content beneath. A scroll bar indicates the page is scrolled to the top.
</p>
<p class="alt" hidden id="_dgm-phone-browser-scrolled-to-top-without-url">
捕捉された~snapshotは、
~URL~barの奥にある区画の色は，文書を成す残りと同じであることを示す。
◎
The captured snapshot. It shows the area underneath the URL bar as the same color as the rest of the document.
</p>
</div>

<figcaption>
捕捉された~snapshotと利用者に見えるものを比較した例。
この例は、
遷移~名を伴う要素は根しか無いと見做す。
◎
An example of what the user sees compared to the captured snapshot. This example assumes the root is the only element with a transition name.
</figcaption></figure>
					</li>
				</ul>
			</li>
			<li>
~RET 画像としての %~canvas
— %~canvas の~sizeが，そのまま画像の`生来な~size$になるとする
◎
Return this canvas as an image. The natural size of the image is equal to the snapshot containing block.
</li>
		</ol>
	</li>
	<li>
<p>
~ELSE：
◎
Otherwise:
</p>
		<ol>
			<li>
%~canvas ~LET 広さ無限な透明な~canvas
◎
↓</li>
			<li>
%要素, %要素 の`子孫$を［
%要素 が %文書 内で現れるときと同じ~size
］で［
%要素 の`描画~特性を捕捉する$
］下で %~canvas 上に描画する
◎
Render element and its descendants, at the same size it appears in its node document, over an infinite transparent canvas, following the capture rendering characteristics.
</li>
			<li>
<p>
~RET 画像としての %~canvas の［
%要素 の`~ink~overflow矩形$
］を含む部位。
この画像の［
`生来な寸法$／原点
］は、［
%要素 の`首要~box$を成す`~border~box$
］の［
`~size$になる／
原点に対応する
］モノトスル
— ［
当の画像は、
この`~border~box$の内容を表現する
］かつ［
捕捉された`~ink~overflow$は、
この限界域の外側で表現される
］ように。
◎
Return the portion of this canvas that includes element’s ink overflow rectangle as an image. The natural dimensions of this image must be those of its principal border box, and its origin must correspond to that border box’s origin, such that the image represents the contents of this border box and any captured ink overflow is represented outside these bounds.
</p>

<p class="note">注記：
この画像が`生来な~size$で`置換d要素$として描画されるときは、
次のように表示されることになる
⇒＃
要素の`首要~box$の［ ~size, 内容 ］を伴う。
捕捉された`~ink~overflow$は要素の`内容~box$を~overflowする。
◎
Note: When this image is rendered as a replaced element at its natural size, it will display with the size and contents of element’s principal box, with any captured ink overflow overflowing its content box.
</p>
			</li>
		</ol>
	</li>
</ol>
</div>

			<section id="capture-rendering-characteristics-algorithm">
<h4 title="Capture rendering characteristics">7.7.1. 描画~特性を捕捉する</h4>

<p>
%要素 の
`描画~特性を捕捉する@
~algoは：
◎
The capture rendering characteristics are as follows:
</p>
<ul>
	<li>
<p>
%要素（および その各~先祖）に適用された変形は無視する。
◎
If the referenced element has a transform applied to it (or its ancestors), then the transform is ignored.
</p>

<p class="note">注記：
この変形は、
【！the associated】
`view-transition-group()$pe 疑似要素の `transform$p ~propを利用して，
~snapshotに適用される。
◎
Note: This transform is applied to the snapshot using the transform property of the associated ::view-transition-group pseudo-element.
</p>
	</li>
	<li>
［
%要素, その各~子孫
］に適用された効果
— `opacity$p や `filter$p など —
は、
捕捉に適用する。
%要素 の各~先祖から %要素 に適用された効果は無視する。
◎
Effects applied on the element and its descendants, such as opacity and filter, are applied to the capture. Effects applied to the element from its ancestors are ignored.
</li>
	<li>
実装は、
%要素 の`~ink~overflow矩形$が何らかの`実装定義$な最大を超過する場合には，
描画される内容をそこまでに切取ってもヨイ。
しかしながら、
捕捉される画像には，少なくとも［
%要素 を成す内容のうち`~snapshot包含塊$に交差する部分
］を含めるベキである。
実装は、
%要素 が［
~viewの中へ変形される広い`~ink~overflow区画$
］を伴うときは，それを織り込むときに~raster化の品質を調整してもヨイ。
◎
Implementations may clip the rendered contents if the ink overflow rectangle exceeds some implementation-defined maximum. However, the captured image should include, at the very least, the contents of element that intersect with the snapshot containing block. Implementations may adjust the rasterization quality to account for elements with a large ink overflow area that are transformed into view.
</li>
	<li>
<p>
実装は、
%要素 の`~ink~overflow矩形$が`~snapshot包含塊$と交差しない場合には，
~raster化の品質を調整してもヨイ。
%要素 が結局は可視になった場合でも，利用者~体験は壊れないよう、
捕捉された画像は，少なくとも［
透明な画素ではなく，
%要素 の内容が成す何らかの低-品質な表現
］を含むベキである。
◎
Implementations may also adjust the rasterization quality for elements whose ink overflow rectangle does not intersect with the snapshot containing block. To avoid a broken experience if the element ends up becoming visible, the captured image should include, at the very least, some low-quality representation of the contents rather than transparent pixels.
</p>

<p class="note">注記：
これは、
%要素 が表示域から離れていて，まったく可視ならないかもしれない場合でも、［
作者の意図に十分~近い視覚的~効果
］を保守しつつ［
資源の利用度, ~raster化の処理能
］における効率を高めることを許容する。
◎
Note: This allows efficiency in resource usage and rasterization performance for elements that are away from the viewport and might not become visible at all, while maintaining a visual effect close enough to the author’s intent.
</p>
	</li>
	<li>
<div>
<p>
~AND↓ を満たす各~要素【！`Element$I】（`疑似要素$も含む） %子孫 の塗ngを飛ばす：
</p>
		<ul>
			<li>
%子孫 は %要素 の`~shadowも含めた子孫$である
</li>
			<li>
%子孫 の`ある~view遷移~内に捕捉されたか$el ~EQ ~T
</li>
		</ul>
◎
For each descendant of shadow-including descendant Element and pseudo-element of element, if descendant is captured in a view transition, then skip painting descendant.
</div>

<p class="note">注記：
これが必要yあるのは、
該当する子孫は、
自前の~snapshotを生成して，独立に［
表示され，~animateされる
］ことになるからである。
◎
Note: This is necessary since the descendant will generate its own snapshot which will be displayed and animated independently.
</p>
	</li>
</ul>

			</section>
		</section>
		<section id="handle-transition-frame-algorithm">
<h3 title="Handle transition frame">7.8. 遷移~frameを取扱う</h3>

<div class="algo">
<p>
`遷移~frameを取扱う@
~algoは、
所与の
( `ViewTransition$I %遷移 )
に対し：
◎
To handle transition frame given a ViewTransition transition:
</p>
<ol>
	<li>
%文書 ~LET %遷移 に`関連な大域~obj$に`結付けられた文書$
◎
Let document be transition’s relevant global object’s associated document.
</li>
	<li>
%作動中な~animationはあるか ~LET ~F
◎
Let hasActiveAnimations be a boolean, initially false.
</li>
	<li>
<p>
%遷移 の`遷移~根~疑似要素$vTの`広義-子孫$を成す
~EACH( %要素 )
に対し：
◎
For each element of transition’s transition root pseudo-element’s inclusive descendants:
</p>
		<ol>
			<li>
<p>
~IF［
~AND↓ を満たす`~animation$ %A は在る
］…
</p>
				<ul>
					<li>
%A の`時列線$An ~EQ %文書 に結付けられた`文書~時列線$
</li>
					<li>
%A に`結付けられた効果$ ~NEQ ~NULL
</li>
					<li>
%A に`結付けられた効果$の`効果~target$ ~EQ %要素
</li>
					<li>
<p>
~OR↓ ：
</p>
						<ul>
							<li>
%A の`再生-状態$ ~IN { `静止中$i, `稼働中$i }
</li>
							<li>
%文書 の`処理待ち~animation~event~queue$内に次を満たす %~event が在る
⇒
%~event の`対応する~event~target$ ~EQ %A
</li>
						</ul>
					</li>
				</ul>
<p>
…ならば
⇒＃
%作動中な~animationはあるか ~SET ~T；
~BREAK
</p>
◎
For each animation whose timeline is a document timeline associated with document, and contains at least one associated effect whose effect target is element, set hasActiveAnimations to true if any of the following conditions are true:
• animation’s play state is paused or running.
• document’s pending animation event queue has any events associated with animation.
</li>
		</ol>
	</li>
	<li>
<p>
~IF［
%作動中な~animationはあるか ~EQ ~F
］：
◎
If hasActiveAnimations is false:
</p>
		<ol>
			<li>
%遷移 の`相$vT ~SET `済み$i
◎
Set transition’s phase to "done".
</li>
			<li>
`~view遷移を~clearする$( %遷移 )
◎
Clear view transition transition.
</li>
			<li>
`~promiseを解決する$( %遷移 の`完遂-時の~promise$vT )
◎
Resolve transition’s finished promise.
</li>
			<li>
~RET
◎
Return.
</li>
		</ol>
	</li>
	<li>
~IF［
%遷移 の`初期~snapshot包含塊~size$vT ~NEQ `~snapshot包含塊の~size$
］
⇒＃
`~view遷移を飛ばす$( %遷移, "`InvalidStateError$E" )；
~RET
◎
If transition’s initial snapshot containing block size is not equal to the snapshot containing block size, then skip the view transition for transition with an "InvalidStateError" DOMException in transition’s relevant Realm, and return.
</li>
	<li>
%成否 ~LET `疑似要素~styleを更新する$( %遷移 )
◎
Update pseudo-element styles for transition.
</li>
	<li>
<p>
~IF［
%成否 ~EQ `失敗^i
］
⇒＃
`~view遷移を飛ばす$( %遷移, "`InvalidStateError$E" )；
~RET
◎
If failure is returned, then skip the view transition for transition with an "InvalidStateError" DOMException in transition’s relevant Realm, and return.
</p>

<p class="note">注記：
上は、［
`incoming^en 要素【新-状態~内の要素】の［
~size／位置
］における変化が新たな~keyframeを生成させることになる
］ことを含意する。
これは、
視覚的な `jump^en 【不連続な~animation】をもたらし得る。
滑らかに `retarget^en する【変化~後の状態を反映するよう更新する】こともできたが，
その複階性を正当化する利用事例は，まだ無い。
詳細は `7813$issue を見よ。
◎
Note: The above implies that a change in incoming element’s size or position will cause a new keyframe to be generated. This can cause a visual jump. We could retarget smoothly but don’t have a use-case to justify the complexity. See issue 7813 for details.
</p>
	</li>
</ol>
</div>

		</section>
		<section id="style-transition-pseudo-elements-algorithm">
<h3 title="Update pseudo-element styles">7.9. 疑似要素~styleを更新する</h3>

<div class="algo">
<p>
`疑似要素~styleを更新する@
~algoは、
所与の
( `ViewTransition$I %遷移 )
に対し：
◎
To update pseudo-element styles for a ViewTransition transition:
</p>
<ol>
	<li>
<p>
%遷移 の`有名~要素~群$vTを成す
~EACH( %遷移~名 → %捕捉された要素 )
に対し：
◎
For each transitionName → capturedElement of transition’s named elements:
</p>
		<ol>
			<li>
%新-要素 ~LET %捕捉された要素 の`新-要素$cE
◎
↓</li>
			<li>
⇒＃
%横幅 ~LET ~NULL,
%縦幅 ~LET ~NULL,
%変形 ~LET ~NULL,
%書字~mode ~LET ~NULL,
%方向 ~LET ~NULL,
%~text方位 ~LET ~NULL,
%混色~mode ~LET ~NULL,
%後景~filter ~LET ~NULL,
%色~scheme ~LET ~NULL
◎
Let width, height, transform, writingMode, direction, textOrientation, mixBlendMode, backdropFilter and colorScheme be null.
</li>
			<li>
<p>
~IF［
%新-要素 ~EQ ~NULL
］：
◎
If capturedElement’s new element is null, then:
</p>
				<ol>
					<li>
%横幅 ~SET %捕捉された要素 の`旧-横幅$cE
◎
Set width to capturedElement’s old width.
</li>
					<li>
%縦幅 ~SET %捕捉された要素 の`旧-縦幅$cE
◎
Set height to capturedElement’s old height.
</li>
					<li>
%変形 ~SET %捕捉された要素 の`旧-変形$cE
◎
Set transform to capturedElement’s old transform.
</li>
					<li>
%書字~mode ~SET %捕捉された要素 の`旧-書字~mode$cE
◎
Set writingMode to capturedElement’s old writing-mode.
</li>
					<li>
%方向 ~SET %捕捉された要素 の`旧-方向$cE
◎
Set direction to capturedElement’s old direction.
</li>
					<li>
%~text方位 ~SET %捕捉された要素 の`旧-~text方位$cE
◎
Set textOrientation to capturedElement’s old text-orientation.
</li>
					<li>
%混色~mode ~SET %捕捉された要素 の`旧-混色~mode$cE
◎
Set mixBlendMode to capturedElement’s old mix-blend-mode.
</li>
					<li>
%後景~filter ~SET %捕捉された要素 の`旧-後景~filter$cE
◎
Set backdropFilter to capturedElement’s old backdrop-filter.
</li>
					<li>
%色~scheme ~SET %捕捉された要素 の`旧-色~scheme$cE
◎
Set colorScheme to capturedElement’s old color-scheme.
</li>
				</ol>
			</li>
			<li>
<p>
~ELSE：
◎
Otherwise:
</p>
				<ol>
					<li>
<p>
~IF［
~OR↓
］…
◎
Return failure if any of the following conditions are true:
</p>
						<ul>
							<li>
`平坦~tree$における %新-要素 の先祖として`内容を飛ばす$ものがある
◎
capturedElement’s new element has a flat tree ancestor that skips its contents.
</li>
							<li>
%新-要素 は`描画され$ない
◎
capturedElement’s new element is not rendered.
</li>
							<li>
%新-要素 は複数個の`~box断片$を有する
◎
capturedElement has more than one box fragment.
</li>
						</ul>
<p>
…ならば
⇒
~RET `失敗^i
◎
↑</p>

<p class="note">注記：
他の描画~拘束は、［
%新-要素 の`ある~view遷移~内に捕捉されたか$el
］を介して施行される。
◎
Note: Other rendering constraints are enforced via capturedElement’s new element being captured in a view transition.
</p>
					</li>
					<li>
%新-矩形 ~LET %新-要素 に応じて
⇒＃
`文書~要素$であるならば`~snapshot包含塊$／
~ELSE_ %捕捉された要素＊ の`~border~box$
◎
Let newRect be the snapshot containing block if capturedElement’s new element is the document element, otherwise, capturedElement’s border box.
</li>
					<li>
%横幅 ~SET %新-矩形 の現在の横幅
◎
Set width to the current width of newRect.
</li>
					<li>
%縦幅 ~SET %新-矩形 の現在の縦幅
◎
Set height to the current height of newRect.
</li>
					<li>
%変形 ~SET 次を満たす変形を与える `transform-function$t
⇒
%新-矩形 を`~snapshot包含塊の原点$から `its^en【 %新-矩形 の？】 現在の視覚的な位置へ対応付けることになる
◎
Set transform to a transform that would map newRect from the snapshot containing block origin to its current visual position.
</li>
					<li>
%書字~mode ~SET %新-要素 の `writing-mode$p の`算出d値$
◎
Set writingMode to the computed value of writing-mode on capturedElement’s new element.
</li>
					<li>
%方向 ~SET %新-要素 の `direction$p の`算出d値$
◎
Set direction to the computed value of direction on capturedElement’s new element.
</li>
					<li>
%~text方位 ~SET %新-要素 の `text-orientation$p の`算出d値$
◎
Set textOrientation to the computed value of text-orientation on capturedElement’s new element.
</li>
					<li>
%混色~mode ~SET %新-要素 の`mix-blend-mode$p の`算出d値$
◎
Set mixBlendMode to the computed value of mix-blend-mode on capturedElement’s new element.
</li>
					<li>
%後景~filter ~SET %新-要素 の `backdrop-filter$p の`算出d値$
◎
Set backdropFilter to the computed value of backdrop-filter on capturedElement’s new element.
</li>
					<li>
%色~scheme ~SET %新-要素 の `color-scheme$p の`算出d値$
◎
Set colorScheme to the computed value of color-scheme on capturedElement’s new element.
</li>

				</ol>
			</li>
			<li>
<p>
：
</p>
				<ol>
					<li>
<p>
~IF［
%捕捉された要素 の`~group~style規則$cE ~EQ ~NULL
］：
</p>
						<ol>
							<li>
%遷移 に`関連な大域~obj$に`結付けられた文書$の`動的な~view遷移~stylesheet$docに［
下に与える~CSS
］を付加する
◎
If capturedElement’s group styles rule is null, then set capturedElement’s group styles rule to a new CSSStyleRule representing the following CSS,＼
</li>
							<li>
%捕捉された要素 の`~group~style規則$cE ~SET ［
下に与える~CSS
］を表現している新たな `CSSStyleRule$I
◎
and append it to transition’s relevant global object’s associated document’s dynamic view transition style sheet.
</li>
						</ol>
					</li>
					<li>
~ELSE
⇒
%捕捉された要素 の`~group~style規則$cEを［
下に与える~CSS
］に合致するよう更新する
◎
Otherwise, update capturedElement’s group styles rule to match the following CSS:
</li>
				</ol>
<p>
上で利用される~CSSは：
◎
↑</p>

<pre class="lang-css">
:root::view-transition-group(%遷移~名) {
  width: %横幅;
  height: %縦幅;
  transform: %変形;
  writing-mode: %書字~mode;
  direction: %方向;
  text-orientation: %~text方位;
  mix-blend-mode: %混色~mode;
  backdrop-filter: %後景~filter;
  color-scheme: %色~scheme;
}
</pre>

<p class="note">注記：
上の~code例は、
置換されることになる変数を包含する。
◎
Note: The above code example contains variables to be replaced.
</p>
			</li>
			<li>
<p>
~IF［
%新-要素 ~NEQ ~NULL
］：
◎
If capturedElement’s new element is not null, then:
</p>
				<ol>
					<li>
%新- ~LET 【新たな？】 `view-transition-new()$pe
— その
⇒
`~view遷移~名$ ~SET %遷移~名
◎
Let new be the ::view-transition-new() with the view transition name transitionName.
</li>
					<li>
%新- の`置換され$る内容 ~SET `画像を捕捉する$( %新-要素 )
◎
Set new’s replaced element content to the result of capturing the image of capturedElement’s new element.
</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>
~RET `成功^i
◎
↑↑</li>
</ol>

<p>
この~algoは、［
`~UA出自$に属する ある~styleによる効果
］が［
ある~web~APIにより観測し得る場合
］には，該当する~styleたちを更新するために実行するモノトスル。
◎
This algorithm must be executed to update styles in user-agent origin if its effects can be observed by a web API.
</p>

<p class="note">注記：
そのような~web~APIの例
⇒
<code>window.getComputedStyle(document.documentElement, `::view-transition^l)</code>
◎
Note: An example of such a web API is window.getComputedStyle(document.documentElement, "::view-transition").
</p>
</div>

		</section>
		<section id="clear-view-transition-algorithm">
<h3 title="Clear view transition">7.10. ~view遷移を~clearする</h3>

<div class="algo">
<p>
`~view遷移を~clearする@
~algoは、
所与の
( `ViewTransition$I %遷移 )
に対し：
◎
To clear view transition of a ViewTransition transition:
</p>
<ol>
	<li>
%文書 ~LET %遷移 に`関連な大域~obj$に`結付けられた文書$
◎
Let document be transition’s relevant global object’s associated document.
</li>
	<li>
~Assert：
%文書 にて`作動中な~view遷移$doc ~EQ %遷移
◎
Assert: document’s active view transition is transition.
</li>
	<li>
<p>
%遷移 の`有名~要素~群$vTの`値~群$mapを成す
~EACH( %捕捉された要素 )
に対し：
◎
For each capturedElement of transition’s named elements' values:
</p>
		<ol>
			<li>
~IF［
%捕捉された要素 の`新-要素$cE ~NEQ ~NULL
］
⇒
%捕捉された要素 の`新-要素$cEの`ある~view遷移~内に捕捉されたか$el ~SET ~F
◎
If capturedElement’s new element is not null, then set capturedElement’s new element’s captured in a view transition to false.
</li>
			<li>
%捕捉された要素 の`~style定義~群$cE【を成す~itemたちを表現する~list】を成す
~EACH(  %~style )
に対し
⇒
~IF［
%~style ~NEQ ~NULL
］~AND［
%~style は %文書 の`動的な~view遷移~stylesheet$doc内にある
］
⇒
%文書 の`動的な~view遷移~stylesheet$docから %~style を除去する
◎
For each style of capturedElement’s style definitions:
• If style is not null, and style is in document’s dynamic view transition style sheet, then remove style from document’s dynamic view transition style sheet.
</li>
		</ol>
	</li>
	<li>
%文書 の`~view遷移~treeを示すか$doc ~SET ~F
◎
Set document’s show view transition tree to false.
</li>
	<li>
%文書 にて`作動中な~view遷移$doc ~SET ~NULL
◎
Set document’s active view transition to null.
</li>
</ol>
</div>

		</section>
	</section>
	<section id="priv">
<h2 title="Privacy Considerations">~privacyの考慮点</h2>

<p>
この仕様が導入する新たな~privacyの考慮点は無い。
◎
This specification introduces no new privacy considerations.
</p>

	</section>
	<section id="sec">
<h2 title="Security Considerations">~securityの考慮点</h2>

<p>
`画像を捕捉する$~algoを利用して生成される画像は、［
非同一-生成元に属する~data
（当の`文書$が非同一-生成元に属する資源を埋込んでいる場合）／
訪問~済み~linkの様な敏感な情報
］も包含し得る。
実装は、［
そのような~dataには，当の`文書$は~accessし得ない
］ことを確保するモノトスル。
これは、
実現可能なはずである
— そのような~accessは、
当の`文書$の既定の描画においても，すでに防止されるべきなので。
◎
The images generated using capture the image algorithm could contain cross-origin data (if the Document is embedding cross-origin resources) or sensitive information like visited links. The implementations must ensure this data can not be accessed by the Document. This should be feasible since access to this data should already be prevented in the default rendering of the Document.
</p>

	</section>
	<section id="changes">
<h2 title="Appendix A. Changes">変更点</h2>

◎非規範的

<dl>
	<dt id="changes-since-2023-05-30">
`2023年 5月 30日 作業草案＠~TR/2023/WD-css-view-transitions-1-20230530/$
からの変更点
◎
Changes from 2023-05-30 Working Draft
</dt>
	<dd>
~keyframeを利用して，
~cross-fadeの間に `plus-lighter$v 混色-法を追加するようにした。
（ `8924$issue ）
◎
Use a keyframe to add plus-lighter blending during cross-fade. See issue 8924.
</dd>
	<dd>
`view-transition-group^pe へ複製される~propたちが成す~listに
`mix-blend-mode^p を追加した。
（ `8962$issue ）
◎
Add mix-blend-mode to list of properties copied over to the ::view-transition-group. See issue 8962.
</dd>
	<dd>
`view-transition-group^pe へ複製される~propたちが成す~listに
`text-orientation^p を追加した。
（ `8230$issue ）
◎
Add text-orientation to list of properties copied over to the ::view-transition-group. See issue 8230.
</dd>
	<dd>
`旧-状態を捕捉する$ ~algoを~~再構成した
— `ある~view遷移~内に捕捉されたか$elを その値が後で読取られる前に適正に設定するよう。
◎
Refactor the old capture algorithm to properly set captured in a view transition before reading the value.
</dd>
	<dd>
`startViewTransition()$m の~parameterを ~NULL 可能でなくした。
（ `9460$issue ）
◎
Make the startViewTransition() parameter non-nullable. See issue 9460.
</dd>
	<dd>
`~view遷移$に関与している要素は、
~accessibility~treeに公開されるものとした。
（ `9365$issue ）
◎
Elements participating in a view transition are exposed to accessibility tree. See issue 9365.
</dd>
	<dd>
`~view遷移~tree$は、
~accessibility~treeには公開されないものとした。
（ `9365$issue ）
◎
The view transition tree is not exposed to accessibility tree. See issue 9365.
</dd>
	<dd>
後景~filterは、
変形や~sizeと類似に~animateするものとした。
（ `9358$issue ）
◎
Animate back-drop filter similar to transform/size. See issue 9358.
</dd>
	<dd>
~DOM要素から `color-scheme$p を `view-transition-group()$pe へ複製するようにした。
（ `9276$issue ）
◎
Copy color-scheme from DOM element to ::view-transition-group(). See issue 9276.
</dd>
	<dd>
`文書$の`~view遷移を自動で飛ばすか^doc【この用語は今や廃された】を公開して，［
外方への非同一-文書~遷移が~program的な~view遷移に先行する
］ことを許容するようにした。
（ `9512$issue ）
◎
Expose auto-skip view transition for a Document, to allow having outbound cross-document transitions preceed programmatic view transiitons. see issue 9512.
</dd>
	<dd>
なぜ `view-transition-name$p が~animate可能になるべきかについて，注記を追加した。
◎
Add a note about why view-transition-name should be animatable.
</dd>
	<dd>
`view-transition-name$p 用の値 `auto^v は、
無効な値になるべきとした。
（ `9639$issue ）
◎
view-transition-name: auto should be an invalid value. See issue 9639.
</dd>
	<dd>
入口~animation用の塗り順序を説明する注記を追加した。
（ `9672$issue ）
◎
Add note to explain paint order for entry animations. See issue 9672.
</dd>
	<dd>
`有名~要素~群$vTがどう片付けられるかを説明する注記を追加した。
（ `9669$issue ）
◎
Add note to explain how the named elements are cleaned up. See issue 9669.
</dd>
	<dd>
時機
— とりわけ `updateCallbackDone$m のそれを — 
を明確化するよう，~algoを~~再構成した。
（ `9762$issue ）
◎
Refactor algorithm to clarify timing, especially of `updateCallbackDone. See issue 9762.
</dd>
	<dd>
~UA~stylesheet内の［
`view-transition-image-pair()^pe ／
`view-transition-old()^pe ／
`view-transition-new()^pe
］用の規則に
<code class="css">`animation-delay^p: `inherit^v</code>
を追加した。
（ `9817$issue ）
◎
Add animation-delay inherit to UA stylesheet rules for (::view-transition) -image-pair, -old, and -new. See issue 9817.
</dd>
	<dd>
文書が非可視なときは
~animationを自動で飛ばすようにした。
（ `9543$issue ）
◎
Auto-skip animation when document is hidden. See issue 9543.
</dd>
	<dd>
~level 1 仕様を~cleanに保つため、
非同一-文書な~view遷移への参照を除去した。
（ `9886$issue ）
◎
Remove references to cross-document view-transitions, to keep the L1 spec clean. See Issue 9886.
</dd>
	<dd>
~pageが非可視になったときに作動中な遷移を飛ばすための~algoを~exportした。
（ `9543$issue ）
◎
Export an algorithm to skip the active transition when the page is hidden. See issue 9543.
</dd>
	<dd>
文書~要素~用の新たな状態を捕捉するときに`~snapshot包含塊$を利用するようにした。
（ `10177$issue ）
◎
Use snapshot containing block when capturing new state for document element. See issue #10177.
</dd>
	<dd>
<p>
`ViewTransitionUpdateCallback$I【！updateDOMCallback】 ~promiseを配送するための~algoを修正した。
</p>

<p class="trans-note">【
~promiseを “配送する” のような用語は定義されていない。
この項目が追加された少し前の更新による［
`更新~callback済み時の~promise$vT を解決する時機（ `10302$issue ）
］を指すように思われる。
】</p>
◎
Fix algorithm for dispatching updateDOMCallback promise.
</dd>
	<dd>
~view遷移~名の視野を`~tree文脈$も合致するものに限るようにした。
（ `10145$issue ）
◎
Scope view transition names to matching tree context. See issue 10145.
</dd>
	<dd>
要素の代わりに名前【`~tree視野な名前$】と照合するよう視野-法を修正した。
（ `10145$issue ）
◎
Fix scoping to match name instead of element. See issue 10145.
</dd>
	<dd>
表示域から外れた要素の描画~特性に関する注記を追加した。
（ `8282$issue ）
◎
Add a rendering characteristics note about out-of-viewport elements. See issue 8282.
</dd>
	<dd>
【`更新~callbackを~callする$において、】
%遷移 の`相$vT を設定してから %遷移 の`更新~callback$vTを呼出すよう，順序を入れ替えた。
（ `10822$issue ）
◎
Swap the order of invoking the update callback and setting the phase. See issue 10822.
</dd>
	<dd>
更新~callbackたちが成す~queueを常に［
旧-状態を捕捉する前に一掃する
］ようにした。
（ `11922$issue ）
◎
Always flush the queue of update callbacks before capturing the old state. See issue 11922.
</dd>
	<dd>
`match-element^v を【 `view-transition-name$p 用の】 `custom-ident^t として許容しないようにした。
（ `10995$issue ）
◎
Disallow match-element as a custom-ident. See Issue 10995.
</dd>

	<dt id="changes-since-2022-05-25">
`2022年 5月 25日 作業草案＠~TR/2023/WD-css-view-transitions-1-20230525/$
からの変更点
◎
Changes from 2022-05-25 Working Draft
</dt>
	<dd>
`view-transition-new()$pe 用の~UA~stylesheetにおける誤記を修正した。
（ `pull #8879＠https://github.com/w3c/csswg-drafts/pull/8879$ ）
◎
Fix typo in ::view-transition-new user agent style sheet. See PR.
</dd>

	<dt id="changes-since-2022-11-24">
`2022年 11月 24日 作業草案＠~TR/2022/WD-css-view-transitions-1-20221124/$
からの変更点
◎
Changes from 2022-11-24 Working Draft
</dt>
	<dd>
~pointer~event【の~target】は、
描画が抑止されるときは，文書~要素に解決されるようにした。
（ `7797$issue ）
◎
Pointer events resolve to the documentElement when rendering is suppressed. See issue 7797.
</dd>
	<dd>
遷移に関与している要素に対し，描画~拘束を追加した。
（ `8139$issue, `7882$issue ）
◎
Add rendering constraints to elements participating in a transition. See issue 8139 and issue 7882.
</dd>
	<dd>
~HTMLに特有なものを~UA~stylesheetから除去した
— ~SVG`文書$においても `ViewTransition$I を~supportするため。
◎
Remove html specifics from UA stylesheet to support ViewTransitions on SVG Documents.
</dd>
	<dd>
`updateDOMCallback^I を `ViewTransitionUpdateCallback$I に改称した。
（ `8144$issue ）
◎
Rename updateDOMCallback to ViewTransitionUpdateCallback. See issue 8144.
</dd>
	<dd>
~snapshot表示域を`~snapshot包含塊$に改称した。
◎
Rename snapshot viewport to snapshot containing block.
</dd>
	<dd>
表示域~sizeが変化した場合、
遷移を飛ばすようにした。
（ `8045$issue ）
◎
Skip the transition if viewport size changes. See issue 8045.
</dd>
	<dd>
`only-child$ps 用の~supportを追加した。
（ `8057$issue ）
◎
Add support for :only-child. See issue 8057.
</dd>
	<dd>
`疑似要素~根$の下で疑似要素たちが成す~treeの概念を追加した。
（ `8113$issue ）
◎
Add concept of a tree of pseudo-elements under pseudo-element root. See issue 8113.
</dd>
	<dd>
遷移を飛ばすときは、
`ViewTransitionUpdateCallback$I は，
同期的にではなく自前の~task内で~callされるようにした。
（ `7904$issue
◎
When skipping a transition, the ViewTransitionUpdateCallback is called in own task rather than synchronously. See issue 7904
</dd>
	<dd>
画像を捕捉するときは、
少なくとも表示域に入る部分は捕捉されるベキである
— 必要なら縮小して。
（ `8561$issue ）
◎
When capturing images, at least the in-viewport part of the image should be captured, downscale if needed. See issue 8561.
</dd>
	<dd>
捕捉された画像に対する`~ink~overflow$の適用-法を`実装定義$にして、
画像の`生来な~size$には影響しないようにした。
（ `8597$issue ）
◎
Applying the ink overflow to the captured image is implementation defined, and doesn’t affect the image’s natural size. See issue 8597.
</dd>
	<dd>
断片化された要素は、
~view遷移には関与しないようにした。
（ `8339$issue ）
◎
Fragmented elements don’t participate in view transitions. See issue 8339.
</dd>
	<dd>
“~snapshot根” を “~snapshot包含塊” に改称した。
それを子孫~用の［
`絶対~位置決め包含塊$, `固定d位置決め包含塊$
］になるようにした。
（ `8505$issue ）
◎
Rename "snapshot root" to "snapshot containing block", and make it an absolute positioning containing block and a fixed positioning containing block for its descendants. See issue 8505.
</dd>

	<dt id="changes-since-2022-10-25">
`2022年 10月 25日 最初の公な作業草案＠~TR/2022/WD-css-view-transitions-1-20221025/$
からの変更点
◎
Changes from 2022-10-25 Working Draft (FPWD)
</dt>
	<dd>
`動的な~view遷移~stylesheet$docの概念を追加した
— 動的に生成され, 現在の`文書$に視野が絞られた~UA~style用に。
◎
Add dynamic view transition style sheet concept for dynamically generated UA styles scoped to the current Document.
</dd>
	<dd>
~snapshot表示域の概念を追加した。
（ `7859$issue ）
◎
Add snapshot viewport concept. See issue 7859.
</dd>
	<dd>
遷移を飛ばすときに，~promiseがいつ［
解決される／却下される
］かを明確化した。
（ `7956$issue ）
◎
Clarify timing for resolving/rejecting promises when skipping the transition. See issue 7956.
</dd>
	<dd>
［
<code class="css">`content-visibility^p: `auto^v</code>
を伴い，自身の内容を飛ばす要素
］の子孫【！under】は、
無視するようにした。
（ `7874$issue ）
◎
Elements under a content-visibility:auto element that skips its contents are ignored. See issue 7874.
</dd>
	<dd>
疑似要素~DOM上の~UA~styleは、
開発者から観測-可能な~API用に，
作者~DOMとの同期cを~~保つようにした。
（ `7812$issue ）
◎
UA styles on the pseudo-DOM stay in sync with author DOM for any developer observable API. See issue 7812.
</dd>
	<dd>
`updateCallback$V の間は、
描画を抑止するようにした。
（ `7784$issue ）
◎
Suppress rendering during updateCallback. See issue 7784.
</dd>
	<dd>
新-状態【！新たな`文書$】~内の要素の［
~size／位置
］における変化は、
新たな~UA~animation~keyframeを生成するようにした。
（ `7813$issue ）
◎
Changes in size/position of elements in the new Document generate new UA animation keyframes. See issue 7813.
</dd>
	<dd>
`-ua-^css 接頭辞を利用して、
~keyframeの視野が~UA~stylesheetに絞られるようにした。
（ `7560$issue ）
◎
Scope keyframes to user agent stylesheets using -ua- prefix. See issue 7560.
</dd>
	<dd>
各 疑似要素の名前を `view-transition-*^pe に更新した。
（ `7960$issue ）
◎
Update pseudo element names to view-transition*. See issue 7960.
</dd>
	<dd>
疑似要素~用の選択子~構文を更新した。
（ `7788$issue ）
◎
Update selector syntax for pseudo-elements. See issue 7788.
</dd>
	<dd>
［
§ ~securityの考慮点, § ~privacyの考慮点
］を追加した。
◎
Add sections for security/privacy considerations.
</dd>
</dl>

	</section>
</main></div>