css-animations2-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>CSS Animations Level 2 （日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">
<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>
Util.ready = function(){
	const source_data = {
		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;
	let context_prop = '';

	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':
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 't':
	text = `&lt;${key}&gt;`;
	key = key.replace(/\s*\[.+/, '');
	break;
case 'p': // property
	if( indicator === '@') {
		context_prop = `#valdef-${key}-`;
	}
	break;
case 'v':
	href = context_prop + key;
	break;
case 'tp':
	text = `&lt;'<code class="property">${key}</code>'&gt;`;
	href = link_map[`p.${key}`];
	break;
case 'at':
	text = `@${key}`;
	break;
case 'ps':
	text = `:${key}`;
	break;
case 'pe':
	text = `::${key}`;
	break;
case 'f':
	text = `${key}()`;
	break;
case 'l':
	text = `"<code class="literal">${text}</code>"`;
	break;
case 'm':
	const n = text.indexOf('(');
	if(n > 0){
		key = text.slice(0, n);
		text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
	}
	break;
case 'en':
	text = `<span lang="en">${key}</span>`;
	break;
case 'issue':
	href = `~CSSissue/${key}`;
	text = `課題 #${key}`;
	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 Animations Level 2
spec_date:2025-03-03
trans_update:2025-03-04
source_checked:230422
page_state_key:CSS
original_url:https://drafts.csswg.org/css-animations-2/
	abbr_url:CSSANIM2
spec_status:ED
ref_id_prefix:biblio-
ref_id_lowercase:true
site_nav:css-anim,css
conformance:css
copyright:2025,permissive
trans_1st_pub:2019-01-06

●●class_map
p:property
ps:pseudo
pe:pseudo
at:at-rule
t:type
tp:type
v:value
et:event-type
E:error
css:css
f:func
op:op

●●tag_map
p:code
pe:code
ps:code
t:var
tp:var
css:code
at:code
f:code
et:code
E:code
I:code
m:code
v:code
c:code
i:i
op:span

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

none1:none

●●words_table

	●animation
WAnim:Web Animations
keyframe:
moment::時点
seek:
組成-:composite::~
組成法:composite::~
累積-:accumulate::~
稼働中:running::~
稼働中の:runningな::~
再生-:play::~
再生:playback::~
	再生し直す:replay
逆再生-:reverse::~
	再生~方向は逆になる:forward 〜 reverse
静止-:pause::~
静止中:paused::~
静止中の:pausedな::~
事後:after::~
事前:before::~
区間:interval::~
経過d:elapsed::経過
延伸:fill::~
延長-:extend:~
	延伸-:extend:~

相:phase::~
両方:both::~
作動:active::~::アクティブ
遊休:idle::~
遊休中:idle::~
未解決:unresolved::~
巻戻す:rewindする::~
現-:current:~
easing:
	~easing:timing
周回:cycle:~
瞬間的:instantaneous:~
誘発体:trigger:~
抜出た:exitした:抜け出た
抜出時の:exit:抜け出し時の
入った:enterした:~
	再び入った:re-enter
不連性:jump:~

	始め:beginning
	~~限界:extent

	●一般処理
処理待ち:pending::~
繰返しの:repeating:繰り返しの
繰返して:repeatして:繰り返して
渡され:passされ::~
換算-:convert:~
飛ばさ:skipさ:~
組立-:assemble::組み立て
	組立-法:assembling
縮約-:collapse::~
付-:attach:~

	同時に:simultaneous
	間を置かずに:immediate succession
	し続ける:sticky
	以降は 〜 しても:after 〜 subsequent

	`~offset$kF:keyframe offset
	`計時~関数$kF:keyframe timing function
	`組成法$kF:keyframe-composite
	`値~群$kF:keyframe values
	同じ`~offset$kFを伴う:duplicate
	%~animation:-
	%~keyframe効果:-
	%要素:element
	%N
	%既定の計時~関数:default timing function
	%既定の組成法:default composite
	%~keyframe群:keyframes
	%~animateされる~prop群:animated properties
	%~keyframe規則:-
	%初期~keyframe:initial keyframe
	%最終-~keyframe:final keyframe
	%規則~名:name
	%~keyframe~block群:-
	%~keyframe~block~map:-
	%~block:-
	%~offset:-
	%~block群:-
	%最後に宣言された計時~関数:-
	%最後に宣言された組成法:-
	%値~群:-
	%~keyframe:-
	%初期または最終-~keyframe:-
	%~prop:-
	%前回の現-反復:previous current iteration
	%反復~境界:iteration boundary

	●順序
昇順:ascending order:~
最終-:final:~
	より前:earlier
	より前:lower
	うち最初に位置する:earliest position
	早いもの順に:from earliest to latest
	より後:later
	後で:later
	移して:shift
	先頭へ:front
	来る:come
	それ以降:that point forwards
	その時点から:after which point
	前回の:previous
	時点:point
	時点:at the moment
	時点:at the time
	-:next

	●構文
導入部:prelued:~

	●CSS
出自の:originating::~
出自:origin::~
展開-:expand::~
協調-:coordinate:~
宣言d:declared::宣言
書字:writing::~

	下位prop:longhand／:subproperties／
	~~末端の下位prop:longhand subproperties
	-:encounter
	算出し直す:recomputing
	視野~法:scoping

	●仕様
	API:programming interface
	~level:Level
可能性:possibility:~
事実:fact:~
差分:delta:~
安定-:stable:~
併合-:merge:~
切離され:disassociateされ:切り離され
孤立な:orphaned:孤立した

	対応関係:correspondance
	優先される:precedenceを take する
	よって:hence
	常にそうなるは限らない:this is not always the case
	であり、:meaning that
	以下における:subsequent references
	および:as well as
	指す:refer to
	あてがった:filling-in
	追い続ける:hang on
	“〜”:reference
	授ける:impart
	人に易しくなる:ergonomics
	区別:distinction
	規範的でない:informative
	注記:note
	書き直:rewrote
	相互~link:cross-link
	まだ指定され:under-specified

	●未分類
milli:milli-:::ミリ
	~milli秒数:millisecond

	図:chart
	A/B/C/D/E
	秒:seconds
	~CSS~animation:CSS Animation
	~live性:liveness
	計算し直す:recalculating
	そうなる:enter
	なる:become
	現れる:appearする
	様々な:various
	片:fragment
	いずれか一つ:mutually-exclusive
	間近に:closer to
	他へ:out
	両方^i
	-:final
	目に見える:noticeable
	各回:each time
	一回だけ〜【… 用の挙動を伴わずに】:once and only once
	一回だけ:once
	~list値をとる:list-valued
	-:together
	生じ得る:may create
	`length-percentage$t により指定された長さにある地点:the specified point

●●original_id_map

valdef-animation-composition-replace:
valdef-animation-composition-add:
valdef-animation-composition-accumulate:

●●mdn_urls
	propdef-animation-composition:CSS/animation-composition
	cssanimation:API/CSSAnimation

●●link_map

	●IDL

Exposed:~WEBIDLjs#Exposed
CSSOMString:~CSSOM1#cssomstring
unrestricted double:~WEBIDL#idl-unrestricted-double

I.AnimationEffect:~WANIMapi#animationeffect
I.KeyframeEffect:~WANIMapi#keyframeeffect
I.CSSAnimation:#cssanimation
I.Animation:~WANIMapi#animation
I.AnimationEvent:~CSSANIM#animationevent
I.DocumentTimeline:~WANIMapi#documenttimeline
I.KeyframeEffect:~WANIMapi#keyframeeffect
I.KeyframeEffectReadOnly:~WANIMapi#keyframeeffectreadonly
I.OptionalEffectTiming:~WANIMapi#dictdef-optionaleffecttiming

m.animationName:#dom-cssanimation-animationname
m.elapsedTime:~CSSANIM#dom-animationevent-elapsedtime
m.effect:~WANIMapi#dom-animation-effect
m.getAnimations:~WANIMapi#dom-animatable-getanimations
m.pause:~WANIMapi#dom-animation-pause
m.play:~WANIMapi#dom-animation-play
m.playState:~WANIMapi#dom-animation-playstate
m.reverse:~WANIMapi#dom-animation-reverse
m.setKeyframes:~WANIMapi#dom-keyframeeffect-setkeyframes
m.startTime:~WANIMapi#dom-animation-starttime
m.updateTiming:~WANIMapi#dom-animationeffect-updatetiming
m.getKeyframes:~WANIMapi#dom-keyframeeffect-getkeyframes

	●et
et.animationcancel:~CSSANIM#eventdef-globaleventhandlers-animationcancel
et.animationend:~CSSANIM#eventdef-globaleventhandlers-animationend
et.animationiteration:~CSSANIM#eventdef-globaleventhandlers-animationiteration
et.animationstart:~CSSANIM#eventdef-globaleventhandlers-animationstart

	●css
at.keyframes:~CSSANIM#at-ruledef-keyframes

p.animation:~CSSANIM#propdef-animation
p.animation-composition:#propdef-animation-composition
p.animation-timeline:#propdef-animation-timeline
p.animation-delay:~CSSANIM#propdef-animation-delay
p.animation-direction:~CSSANIM#propdef-animation-direction
p.animation-duration:#propdef-animation-duration
p.animation-fill-mode:~CSSANIM#propdef-animation-fill-mode
p.animation-iteration-count:~CSSANIM#propdef-animation-iteration-count
p.animation-name:~CSSANIM#propdef-animation-name
p.animation-play-state:~CSSANIM#propdef-animation-play-state
p.animation-range:~SCROLL-ANIM#propdef-animation-range
p.animation-range-end:~SCROLL-ANIM#propdef-animation-range-end
p.animation-range-start:~SCROLL-ANIM#propdef-animation-range-start
p.animation-timing-function:~CSSANIM#propdef-animation-timing-function
p.animation-trigger:#propdef-animation-trigger
p.animation-trigger-type:#propdef-animation-trigger-type
p.animation-trigger-timeline:#propdef-animation-trigger-timeline
p.animation-trigger-range:#propdef-animation-trigger-range
p.animation-trigger-range-start:#propdef-animation-trigger-range-start
p.animation-trigger-range-end:#propdef-animation-trigger-range-end
p.animation-trigger-exit-range:#propdef-animation-trigger-exit-range
p.animation-trigger-exit-range-start:#propdef-animation-trigger-exit-range-start
p.animation-trigger-exit-range-end:#propdef-animation-trigger-exit-range-end

p.scale:~TRANSFORM2#propdef-scale
	p.scale:https://drafts.csswg.org/css-transforms-2/#propdef-scale
p.display:~CSSDISP#propdef-display


t.dashed-ident:~CSSVAL#typedef-dashed-ident
	t.custom-ident:~CSSVAL#identifier-value
t.percentage:~CSSVAL#percentage-value
t.easing-function:~CSSEASING#typedef-easing-function
t.keyframe-selector:~CSSANIM#typedef-keyframe-selector
t.keyframe-block:~CSSANIM#typedef-keyframe-block
t.keyframes-name:~CSSANIM#typedef-keyframes-name
t.length-percentage:~CSSVAL#typedef-length-percentage
t.single-animation:#typedef-single-animation
t.single-animation-composition:#typedef-single-animation-composition
t.single-animation-direction:~CSSANIM#typedef-single-animation-direction
t.single-animation-fill-mode:~CSSANIM#typedef-single-animation-fill-mode
t.single-animation-iteration-count:~CSSANIM#typedef-single-animation-iteration-count
t.single-animation-play-state:~CSSANIM#typedef-single-animation-play-state
t.single-animation-timeline:#typedef-single-animation-timeline
t.single-animation-trigger:#typedef-single-animation-trigger
t.single-animation-trigger-type:#typedef-single-animation-trigger-type
t.string:~CSSVAL#string-value
t.time:~CSSVAL#time-value
t.scroll():~SCROLL-ANIM#funcdef-scroll
t.view():~SCROLL-ANIM#funcdef-view
t.timeline-range-name:~SCROLL-ANIM#typedef-timeline-range-name
f.scroll:~SCROLL-ANIM#funcdef-scroll
f.view:~SCROLL-ANIM#funcdef-view

	#valdef-animation-timeline-auto
	#valdef-animation-timeline-none

	#valdef-animation-composition-replace
	#valdef-animation-composition-add
	#valdef-animation-composition-accumulate

	#valdef-animation-duration-auto
	#valdef-animation-duration-time-0s

	#valdef-animation-timeline-dashed-ident
	#valdef-animation-timeline-scroll
	#valdef-animation-timeline-view

	#valdef-animation-trigger-type-once
	#valdef-animation-trigger-type-repeat
	#valdef-animation-trigger-type-alternate
	#valdef-animation-trigger-type-state

	#valdef-animation-trigger-exit-range-start-auto
	#valdef-animation-trigger-exit-range-start-normal
	#valdef-animation-trigger-exit-range-start-length-percentage
	#valdef-animation-trigger-exit-range-start-timeline-range-name-length-percentage

	#valdef-animation-trigger-exit-range-end-auto
	#valdef-animation-trigger-exit-range-end-normal
	#valdef-animation-trigger-exit-range-end-length-percentage
	#valdef-animation-trigger-exit-range-end-timeline-range-name-length-percentage

v.~none1:~CSSDISP#valdef-display-none

	＠~CSSANIM#valdef-animation-fill-mode-backwards
	＠~CSSANIM#valdef-animation-fill-mode-both
	＠~CSSANIM#valdef-animation-fill-mode-forwards
	＠~CSSANIM#valdef-animation-fill-mode-none
	＠~CSSANIM#valdef-animation-name-none
	＠~CSSANIM#valdef-animation-play-state-paused
	＠~CSSANIM#valdef-animation-play-state-running

	●用語
経過d時間:#elapsed-time
区間~終端:#interval-end
区間~始端:#interval-start
所有している要素:#owning-element
使用~keyframe順序:#used-keyframe-order
算出d~keyframe順序:#computed-keyframe-order
指定d~keyframe順序:#specified-keyframe-order

	*:#multiple-events-note
	:#animation-iteration-elapsed-time

kF.~offset:#_keyframe-offset
kF.計時~関数:#_keyframe-timing-function
kF.組成法:#_keyframe-composite
kF.値~群:#_keyframe-values


	●用語（CSSANIM／WANIM
~animation~prop:~CSSANIM#_animation-properties
計時~関数:~CSSEASING#easing-function

時列線:~WANIM#timeline
既定の文書~時列線:~WANIM#document-default-document-timeline
~animation:~WANIM#concept-animation
~animation~class:~WANIM#animation-class
~animation~frame:~WANIM#animation-frame
~animationを再生する:~WANIM#play-an-animation
~animationを静止する:~WANIM#pause-an-animation
~animation効果:~WANIM#animation-effect
大域~animation~list:~WANIM#global-animation-list
~keyframe:~WANIM#keyframe
	~keyframe:~CSSANIM#keyframe
~keyframe~offset:~WANIM#keyframe-offset
再生-状態:~WANIM#animation-play-state
再生~方向:~WANIM#playback-direction
反復~回数:~WANIM#iteration-count
反復~所要時間:~WANIM#iteration-duration
延伸~mode:~WANIM#fill-mode
開始-遅延:~WANIM#start-delay
i.静止中:~WANIM#play-state-paused
i.稼働中:~WANIM#play-state-running
i.遊休中:~WANIM#play-state-idle
結付けられた効果:~WANIM#animation-associated-effect
結付けられた効果の終端:~WANIM#associated-effect-end
~target要素:~WANIM#effect-target-target-element

i.作動~相:~WANIM#animation-effect-active-phase
i.事後~相:~WANIM#animation-effect-after-phase
i.事前~相:~WANIM#animation-effect-before-phase
i.遊休~相:~WANIM#animation-effect-idle-phase

作動~所要時間:~WANIM#active-duration
作動~時刻:~WANIM#active-time
組成-演算~型:~WANIM#composite-operation
~keyframeに特有な組成-演算~型:~WANIM#keyframe-specific-composite-operation
現在の反復~index:~WANIM#current-iteration-index
	~WANIM#current-iteration → ~WANIM#current-iteration-index
現-時刻:~WANIM#animation-current-time
反復~始端:~WANIM#iteration-start
未解決:~WANIM#unresolved
組成-順序:~WANIM#animation-composite-order
処理待ち再生-~task:~WANIM#pending-play-task
処理待ち静止-~task:~WANIM#pending-pause-task
~animation再生~event:~WANIM#animation-playback-events

~animation誘発体:~WANIM2#animation-trigger
aT.作動~区間:~WANIM2#animation-trigger-active-interval
aT.種別:~WANIM2#animation-trigger-type
aT.既定の範囲:~WANIM2#default-range
aT.抜出時の範囲:~WANIM2#exit-range

~scroll進捗~時列線:~SCROLL-ANIM#scroll-progress-timelines
~view進捗~時列線:~SCROLL-ANIM#view-progress-timelines
~scroll駆動な~animation:~SCROLL-ANIM#scroll-driven-animations
有名~時列線~範囲:~SCROLL-ANIM#named-timeline-range


~level 1:#biblio-css3-animations

	●用語（他 CSS
~cascade:~CASCADE#cascade
すべての要素:~CSSPSEUDO#generated-content
初期~値:~CASCADE#initial-value
算出d値:~CASCADE#computed-value
指定d値:~CASCADE#specified-value
宣言d値:~CASCADE#declared-value
使用~値:~CASCADE#used-value
~animation出自:~CASCADE#cascade-origin-animation
遷移~出自:~CASCADE#cascade-origin-transition
	出自:~CASCADE#origin
略式~prop:~CASCADE#shorthand-property
下位prop:~CASCADE#longhand
設定し直すのみ:~CASCADE#reset-only-sub-property

解決d値:~CSSOM1#resolved-value

出自の要素:~SELECTORS4#originating-element

~CSS識別子:~CSSVAL#css-css-identifier
協調している~list~prop~group:~CSSVAL#coordinating-list-property
協調される値~list:~CSSVAL#coordinated-value-list
協調している基底~list~prop:~CSSVAL#coordinating-list-base-property

論理-~prop~group:~CSSLOGICAL#logical-property-group

書字~mode:~CSSWM#writing-mode

	●用語（他
~target:~DOM4#event-target
~tree順序:~DOM4#concept-tree-order

~map:~INFRA#ordered-map
付加する:~INFRA#list-append
~list:~INFRA#list
構造体:~INFRA#struct


●●ref_key_map
CSS3ANIMATIONS:CSSANIMATIONS1
CSS3TRANSITIONS:CSSTRANSITIONS1
WEBANIMATIONS:WEBANIMATIONS1

●●ref_normative

[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-CASCADE-6]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 6＞. URL: https://drafts.csswg.org/css-cascade-6/
[CSS-DISPLAY-4]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 4＞. URL: https://drafts.csswg.org/css-display/
[CSS-EASING-2]
    ＜CSS Easing Functions Level 2＞. URL: https://drafts.csswg.org/css-easing/
[CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/
[CSS2]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
[CSS3-ANIMATIONS]
    David Baron; et al. ＜CSS Animations Level 1＞. URL: https://drafts.csswg.org/css-animations/
[CSSOM-1]
    Daniel Glazman; Emilio Cobos Álvarez. ＜CSS Object Model (CSSOM)＞. URL: https://drafts.csswg.org/cssom/
[DOM]
    Anne van Kesteren. ＜DOM Standard＞. Living Standard. URL: https://dom.spec.whatwg.org/
[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
[SCROLL-ANIMATIONS]
    Brian Birtles; et al. ＜Scroll-driven Animations＞. URL: https://drafts.csswg.org/scroll-animations-1/
[WEB-ANIMATIONS]
    Brian Birtles; et al. ＜Web Animations＞. URL: https://drafts.csswg.org/web-animations-1/
[WEB-ANIMATIONS-2]
    Brian Birtles; Robert Flack. ＜Web Animations Level 2＞. URL: https://drafts.csswg.org/web-animations-2/
[WEBIDL]
    Edgar Chen; Timothy Gu. ＜Web IDL Standard＞. Living Standard. URL: https://webidl.spec.whatwg.org/

●●ref_informative

[CSS-CASCADE-4]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 4＞. URL: https://drafts.csswg.org/css-cascade-4/
[CSS-LOGICAL-1]
    Rossen Atanassov; Elika Etemad. ＜CSS Logical Properties and Values Level 1＞. URL: https://drafts.csswg.org/css-logical-1/
[CSS-MASKING-1]
    Dirk Schulze; Brian Birtles; Tab Atkins Jr.. ＜CSS Masking Module Level 1＞. URL: https://drafts.fxtf.org/css-masking-1/
[CSS-TRANSFORMS-2]
    Tab Atkins Jr.; et al. ＜CSS Transforms Module Level 2＞. URL: https://drafts.csswg.org/css-transforms-2/
[CSS-WRITING-MODES-4]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 4＞. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS3-TRANSITIONS]
    David Baron; et al. ＜CSS Transitions＞. URL: https://drafts.csswg.org/css-transitions/

●●ref_additional
[INFRA]
    Anne van Kesteren; Domenic Denicola. ＜Infra Standard＞. Living Standard. URL: https://infra.spec.whatwg.org/

●●trans_metadata

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

●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/css-animations-2/
公表履歴
	https://www.w3.org/standards/history/css-animations-2/
フィードバック
	<a href="https://github.com/w3c/csswg-drafts/labels/css-animations-2">CSSWG Issues Repository</a>
編集
	<a href="https://dbaron.org/">L. David Baron</a> (Google)
	<a href="mailto:brian@birchill.co.jp">Brian Birtles</a> (Invited Expert)

Suggest an Edit for this Spec
	<a href="https://github.com/w3c/csswg-drafts/blob/main/css-animations-2/Overview.bs">GitHub Editor</a>

commit 履歴
	https://github.com/w3c/csswg-drafts/commits/main/css-animations-2

</script>

<body>

<header>
	<hgroup>
<h1>CSS アニメーション 2 — CSS Animations Level 2</h1>
	</hgroup>

</header>

<div id="MAIN" hidden>

	<section id="abstract">
◎要約

<p>
この~CSS~moduleは、
作者が，~keyframeを利用して~CSS~propの値を時間とともに~animateする仕方を述べる。
これらの~keyframe~animationの挙動は［
所要時間, 繰返す回数, 繰返しの挙動
］を指定することにより制御できる。
◎
This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
</p>

~CSSisaLANG

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

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

	</section>

<main id="MAIN0">
	<section id="delta">
<h2 title="Delta specification">1. 差分~仕様</h2>

<p>
これは差分~仕様であり、
現時点の ~level 1 仕様 `CSS3-ANIMATIONS$r からの相違点のみを包含する。
~level 1 仕様が完了-間近になったときは、
それとこの差分は，完全な~level 2 仕様として併合されることになる。
【したがって，以下に現れる “この仕様に定義される…” 等々の句は、~level 1 仕様も包摂する。】
◎
This is a delta specification, meaning that it currently contains only the differences from CSS Animations Level 1 [CSS3-ANIMATIONS]. Once the Level 1 specification is closer to complete, it will be merged with the additions here into a complete level 2 specification.
</p>

	</section>
	<section id="animations">
<h2 title="Animations">2. ~animation</h2>

<p>
この仕様に定義される各種~animation~propに対し，変化が生じたときは、［
対応する `CSSAnimation$I ~obj, それに結付けられた各種~obj
］も更新される
— これらの~propと~WAnimの各種~概念との対応関係は、
`§ ~keyframeの組立-法＠#keyframes$
に則って定義される。
◎
Changes to any of the animation properties defined in this specification cause the corresponding CSSAnimation object and its associated objects to be updated according to the correspondence between these properties and Web Animations concepts defined in § 3 Assembling Keyframes.
</p>

<p>
しかしながら，作者が~WAnim~APIを利用して当の~animationを改変した場合、
~APIによる変更が以下に従うように優先される
— 以下における
%~animation は［
当の~animation, または それを表現する `CSSAnimation$I ~obj
］,
%~keyframe効果 は［
%~animation に結付けられた `KeyframeEffect$I ~obj
【すなわち， %~animation に`結付けられた効果$を表現する `AnimationEffect$I ~obj】
］を指すとする：
◎
However, if the author modifies the animation using the Web Animations programming interface, the changes from the programming interface take precedence as follows:
</p>

<ul>
	<li>
<p>
%~keyframe効果 に対し `setKeyframes()$m が成功裡に~callされて以降は、
%~keyframe効果 の`~target要素$用の［
【その引数に】合致している `keyframes$at 規則／
`animation-timing-function$p ~propの`解決d値$
］を変更しても， %~animation には反映されなくなる。
◎
After a successful call to setKeyframes() on the KeyframeEffect associated with a CSSAnimation, any subsequent change to matching @keyframes rules or the resolved value of the animation-timing-function property for the target element will not be reflected in that animation.
</p>

<p>
ただし，合致している最後の `keyframes$at 規則が除去された場合、
%~animation は 依然として取消されるモノトスル。
◎
However, if the last matching @keyframes rule is removed the animation must still be canceled.
</p>
	</li>
	<li>
<p>
%~keyframe効果 に対し `updateTiming()$m が成功裡に~callされて以降は、［
その %timing ~parameter に渡された `OptionalEffectTiming$I 辞書
【！%timing:~WANIM#dom-animationeffect-updatetiming-timing-timing】
］内に在る各~memberに対応する~animation~propを変更しても， %~animation には反映されなくなる。
◎
After a successful call to updateTiming() on the KeyframeEffect associated with a CSSAnimation, for each property included in the timing parameter, any subsequent change to a corresponding animation property will not be reflected in that animation.
</p>

<p class="example">
例えば，
`cssAnimation.effect.updateTiming({ duration: 1000 })^c
を~callした場合、
`animation-duration$p を変更しても無視されるようになる一方，
`animation-delay$p に対する変更は 依然として
%~keyframe効果 の計時に反映されることになる。
◎
For example, calling cssAnimation.effect.updateTiming({ duration: 1000 }) would cause subsequent changes to animation-duration to be ignored whilst changes to animation-delay would still be reflected in the KeyframeEffect’s timing.
</p>
	</li>
	<li>
<p>
%~animation に対し，次のいずれかが生じたならば、
それ以降は， `animation-play-state$p を変更しても
— <a href="#animation-play-state">§ `animation-play-state^p ~prop</a>
に定義されるとおり —
%~animation は［
再生-／静止-
］されなくなる：
◎
↓</p>
		<ul>
			<li>
［
`play()$m ／ `pause()$m
］が成功裡に~callされた
◎
After a successful call to play() or pause() on a CSSAnimation, any subsequent change to the animation-play-state will no longer cause the CSSAnimation to be played or paused as defined in § 4.5 The animation-play-state property.
</li>
			<li>
<p>
［
`reverse()$m が成功裡に~callされた ／ `startTime$m が成功裡に設定された
］結果として、
%~animation の`再生-状態$が，他から`静止中$iに, またはその逆に変化した
◎
After a successful call to reverse() on a CSSAnimation or after successfully setting the startTime on a CSSAnimation, if, as a result of that call the play state of the CSSAnimation changes to or from the paused play state, any subsequent change to the animation-play-state will no longer cause the CSSAnimation to be played or paused as defined in § 4.5 The animation-play-state property.
</p>

<p class="note">【！ class="note" 追加】
変化の要件を`静止中$iとの行き来に限ることは、
次を確保する
⇒
%~animation が`稼働中$iにあるときは、
`reverse()$m を~callしても, `startTime$m を設定しても，
%~animation は `animation-play-state$p における変化を観測し続ける
◎
The requirement for a change to or from the paused play state ensures that even after calling reverse() or setting the startTime on a running animation, the animation continues to observe changes in animation-play-state.
</p>
			</li>
		</ul>
	</li>
	<li>
%~animation の `effect$m が［
~NULL ／ %~keyframe効果 以外の何らかの `AnimationEffect$I
］に成功裡に設定されて以降は、［
`animation-name$p, `animation-play-state$p, `animation-timeline$p
］以外の各種~animation~propを変更しても，
%~animation には反映されなくなる。
同様に，合致している `keyframes$at 規則に対する変更も，
%~animation には反映されなくなる。
ただし，最後に合致している `keyframes$at 規則が除去された場合、
%~animation は依然として取消されるモノトスル。
◎
After successfully setting the effect of a CSSAnimation to null or some AnimationEffect other than the original KeyframeEffect, all subsequent changes to animation properties other than animation-name, animation-play-state, or animation-timeline will not be reflected in that animation. Similarly, any change to matching @keyframes rules will not be reflected in that animation. However, if the last matching @keyframes rule is removed the animation must still be canceled.
</li>
</ul>

<p class="note">注記：
上の規則における “成功裡” （に~callされた, 等）は、
次を確保するために必要yである
⇒
当の~methodや設定子から例外が投出されたときは、
それらによる［
挙動の上書き
］は`適用されない^em
◎
Note, the reference to a successful call in the above rules is necessary to ensure that when an exception is thrown by any of these methods, the override behavior is not applied.
</p>

		<section id="owning-element-section">
<h3 title="Owning element">2.1. 所有している要素</h3>

<p>
`animation-name$p ~propが適用され，~animationを生成した［
要素／疑似要素
］は、
その~animationを
`所有している要素@
と呼ばれる。
◎
The owning element of an animation refers to the element or pseudo-element to which the animation-name property was applied that generated the animation.
</p>

<p>
所与の要素 %要素 に対し：
◎
↓</p>
<ul>
	<li>
%要素 の `display$p ~propが `~none1$v に設定されたときは
⇒
%要素 の `display$p の`算出d値$が［
`~animation出自$, `遷移~出自$
］を無視したときに `~none1^v になる場合
⇒
稼働中の~animationのうち，次を満たすものは、
終了することになる
⇒
それを`所有している要素$ ~EQ %要素
◎
If the display property of an element is set to none and its display value would compute to none when ignoring the Transitions and Animations cascade origins, then terminate running animations with this owning element.＼
</li>
	<li>
%要素 の `display$p の`算出d値$は［
`~animation出自$, `遷移~出自$
］を無視したときに `~none1$v になる下で
⇒
%要素 の `display$p が `~none1^v から それ以外の値に更新されたときは
⇒
`animation-name$p ~propにより %要素 に適用される~animationを開始させることになる。
◎
If an element has a display of none and its display value had computed to none when ignoring the Transitions and Animations cascade origins, updating display to a value other than none will start all animations applied to the element by the animation-name property.
</li>
</ul>

<p class="note">注記：
実施においては、
このことは次を意味する
⇒
`display$p 用の値 `~none1$v への~animationは、
当の~styleが~animationの効果を伴わない下でも `none^v に算出される場合を除き，
稼働中の各~animationを終了させない。
◎
Note: In practice, this means that an animation to a display value of none will not terminate running animations unless the style also computes to none without the effect of the animations.
</p>


<p>
~animationが［
この仕様が定義する~markup【すなわち，各種~animation~prop宣言】を利用して生成されていて、
それを`所有している要素$の `animation-name$p ~propの算出d値が後で更新されたことにより，その~markupから切離された
］場合、
~animationは，`所有している要素$から切離される
（すなわち、それ以降，~animationを所有している要素は無い）。
◎
If an animation generated using the markup defined in this specification is later disassociated from that markup by an update to the computed value of the animation-name property on the owning element, the animation is disassociated from its owning element (that is, it has no owning element from that point forwards).
</p>

<div class="note">
<p>注記：
下の例においては、
要素 %elem が初期~時の［
%animation を`所有している要素$
］になる。
%animation は、
%elem の `animation-name$p ~propの算出d値に対する更新-を通して，
%elem から切離される。
◎
In the example below, animation’s initial owning element is elem. animation is disassociated from element through an update to the computed value of elem’s animation-name property.
</p>

<pre class="lang-js">
%elem.style.animation = 'spin 1s';
let %animation = %elem.getAnimations()[0]; /* <span class="comment">
%animation を所有している要素は %elem
◎
animation’s owning element is elem
</span> */
%elem.style.animation = ''; /* <span class="comment">
%animation を所有している要素は もはや無い
◎
animation no longer has an owning element
</span> */
</pre>

<p>
~animationを`所有している要素$は、［
~animationに`結付けられた効果$の`~target要素$
］に等しくなることが多いが，
常にそうなるとは限らないことに注意。
この 2 つの要素が相違し得る状況を，次の例にデモる。
◎
Note that although the owning element is often equal to the target element of an animation’s associated effect, this is not always the case. The following example demonstrates some of the situations where these two elements may differ.
</p>

<pre class="lang-js">
%elem.style.animation = 'move 1s';
let %animation = %elem.getAnimations()[0];
/* <span class="comment">
%animation.`effect.target^c ~EQ %elem ~EQ %animation を所有している要素
◎
animation.effect.target == elem == animation’s owning element
</span> */

%animation.effect.target = elem2;
/* <span class="comment">
%animation.`effect.target^c ~EQ %elem2 ~NEQ %animation を所有している要素
◎
animation.effect.target == elem2 != animation’s owning element
</span> */

%animation.effect = null;
/* <span class="comment">
%animation.`effect【！?】.target^c ~EQ undefined ~NEQ %animation を所有している要素
◎
animation.effect?.target is undefined != animation’s owning element
</span> */
</pre>
</div>

		</section>
		<section id="animation-composite-order">
<h3 title="Animation composite order">2.2. ~animationの組成-順序</h3>

<p>
~markupや~interfaceから生成された`~animation$が属する`~animation~class$は、
`~CSS~animation^i とする。
◎
Animations generated from the markup defined in this specification have an animation class of ‘CSS Animation’.
</p>

<p class="trans-note">【
そのような~animationも、
単に “`~CSS~animation^i （ `CSS Animation^en ）” と称される。
また，以下に現れる “`~CSS遷移^i（ `CSS Transition^en ）” は、
`CSS3-TRANSITIONS$r に定義される~animation／それらが属する`~animation~class$を表す。
】</p>

<p>
`~CSS~animation^i の`組成-順序$は：
</p>

<ul>
	<li>
`所有している要素$が在るものは、
`~CSS遷移^i よりも後, かつ［
特定の`~animation~class$に属さない~animation
］よりも前とする。
◎
CSS Animations with an owning element have a later composite order than CSS Transitions but an earlier composite order than animations without a specific animation class.
</li>
	<li>
<p>
`所有している要素$が在るものどうしは、
次に従って~sortする：
◎
Within the set of CSS Animations with an owning element, two animations A and B are sorted in composite order (first to last) as follows:
</p>
		<ul>
			<li>
(A) `所有している要素$が相違するものどうしは、
`所有している要素$の`~tree順序$に従う。
◎
If the owning element of A and B differs, sort A and B by tree order of their corresponding owning elements.＼
</li>
			<li>
同じ %要素 を`出自の要素$とする疑似要素どうしは、
次に挙げる順に~sortする
⇒＃
%要素,
`marker^pe,
`before^pe,
ここでは特定的に言及されない他の疑似要素 — ~Unicode符号位置の昇順で,
`after^pe,
%要素 の子
◎
With regard to pseudo-elements, the sort order is as follows:
• element
• ::marker
• ::before
• any other pseudo-elements not mentioned specifically in this list, sorted in ascending order by the Unicode codepoints that make up each selector
• ::after
• element children
</li>
			<li>
(B) `所有している要素$も同じものどうしは、
各~animationの名前【 `animationName$m 】が，要素~上の `animation-name$p ~propの算出d値に現れる順に~sortする。
◎
Otherwise, sort A and B based on their position in the computed value of the animation-name property of the (common) owning element.
</li>
		</ul>
<p>
ただし，［
`~animation~event＠#events$どうしを~sortするために`組成-順序$を決定する目的
］においては、［
2 つの~animation~eventどちらかは `animationcancel$et ~eventである所
］では，それらを生成した `~CSS~animation^i（たち）を~sortする際には：
◎
When determining the composite order in order to sort animation events where either or both of the events is an animationcancel event, treat the CSS Animation(s) for which the animationcancel event was generated＼
</p>
		<ul>
			<li>
(A) においては
⇒
それらを`所有している要素$には、
当の `~CSS~animation^i が取消された時点に利用-中にあったそれらを利用する。
◎
as having an owning element corresponding to the owning element in use at the moment when the CSS Animation was cancelled.＼
</li>
			<li>
(B) においては
⇒
`animation-name$p ~propの算出d値には、
当の `~CSS~animation^i が取消された時点に効果があった それを利用することに加え，
取消された~animationは取消されなかった~animationより前に~sortする。
◎
Furthermore, use the position of the animation in the animation-name property in effect at the time when the CSS Animation was cancelled＼
sorting such that positions of cancelled animations sort before positions of animations that have not been cancelled.
</li>
		</ul>
	</li>
	<li>
`所有している要素$が無いものどうしの順序は、
それらが`大域~animation~list$に現れる順に従う。
◎
↑↑ The composite order of CSS Animations without an owning element is based on their position in the global animation list.
</li>
</ul>

<p class="issue">
これは、
遷移~用に定義された挙動から相違する。
おそらく，［
遷移, ~animation, 大域~animation~list
］の順に~sortするベキである。
その理由は、
開発者~tool等々が［
孤立な~animationや遷移を再生し直すために，それらを追い続ける
］とき，それらが概ね同じ`組成-順序$を保守するベキであることによる。
◎
This differs from the behavior defined for transitions. We should probably sort transitions first, then animation, then use the global animation list. The reason being that when developer tools etc. hang on to orphaned animations and transitions in order to replay them, they should maintain roughly the same composite order.
</p>

<p>
この仕様が定義する~markupを利用して生成された `~CSS~animation^i は、
作成された時点では，`大域~animation~list$に`追加されない^em。
代わりに，これらの各~animationは、［
それを`所有している要素$から切離された後，`遊休中$iにある間
］は `組成-順序$は定義されず，
他へ遷移した最初の~momentで`大域~animation~list$に付加される。
◎
CSS Animations generated using the markup defined in this specification are not added to the global animation list when they are created. Instead, these animations are appended to the global animation list at the first moment when they transition out of the idle play state after being disassociated from their owning element. CSS Animations that have been disassociated from their owning element but are still idle do not have a defined composite order.
</p>

<p class="note">注記：
この挙動は、
`所有している要素$から切離された~animationは，
常に`遊休中$iになる（新たにそうなるか，そうであり続ける）事実に依拠する。
◎
Note, this behavior relies on the fact that disassociating an animation from its owning element always causes it to enter (or remain) in the idle play state.
</p>

		</section>
	</section>
	<section id="keyframes">
<h2 title="Assembling Keyframes">3. ~keyframeの組立-法</h2>

		<section id="keyframe-rules">
<h3 title="Declaring Keyframes: the @keyframes rule">3.1. ~keyframeの宣言-法： `keyframes$at 規則</h3>

<p>
`CSS3-ANIMATIONS$r `§ ~keyframeの宣言-法＠~CSSANIM#keyframes$
を見よ。
◎
See CSS Animations 1 § 3 Declaring Keyframes.
</p>
		</section>
		<section id="keyframe-processing">
<h3 title="Processing Keyframes">3.2. ~keyframeの処理-法</h3>

<p>
`~target要素$（または疑似要素） %要素 の［
各種 `animation-*^p ~propが成す`協調される値~list$
］を成す［
%N 個目の~itemにより定義される~animation効果
］に結付けられる`~keyframe$たちは，次に従って生成される：
◎
For each animation effect defined by the Nth item in the coordinated value list of the animation-* properties on target (pseudo-)element element, its associated keyframes are generated as follows:
</p>

<p class="trans-note">【
明確化するため、
この訳では， `INFRA$r に定義される各種~data型も利用する。
】</p>
<ol>
	<li>
<p>
（この段は、
既定の値を設定する）：
◎
Set Defaults:
</p>
		<ul>
			<li>
<p>
%既定の計時~関数 ~LET ［
%要素 の `animation-timing-function$p ~propの`算出d値$
］を成す，対応している値
</p>

<p class="trans-note">【
`協調される値~list$は，使用~値に基づいて定義されているので、
“対応している値” は，［
それが算出d値に基づいて定義されていた
］かのように解釈し直す下での，
%N 個目の成分を表す
（次項も同様）。
】</p>
◎
Let default timing function be the corresponding computed value of animation-timing-function on element.
</li>
			<li>
%既定の組成法 ~LET ［
%要素 の `animation-composition$p ~propの`算出d値$
］を成す，対応している値
◎
Let default composite be the corresponding computed value of animation-composition on element.
</li>
			<li>
<p>
%~keyframe群 ~LET 新たな`~list$【！連列】
</p>

<p>
この~listを成す各~item【！~obj】は、
次に挙げるものからなる`構造体$であり，
ある`~keyframe$を表現する：
</p>
				<ul>
					<li>
`~offset@kF
⇒
`~keyframe~offset$を与える
</li>
					<li>
`計時~関数@kF
⇒
`計時~関数$を与える
</li>
					<li>
`組成法@kF
⇒
`組成-演算~型$を与える
</li>
					<li>
<p>
`値~群@kF
⇒
この~keyframeにより~animateされる各（非~略式）~propの名前を値に対応付ける`~map$
</p>

<p class="trans-note">【
これは，原文では値たちが成す集合として記されているが、
実質的には~prop名も含まれるので，`~map$に改める
（順序は有意でない）。
】</p>

					</li>
				</ul>

<p class="trans-note">【
各~itemに与えた記述は、
この訳による補完。
】【
これらの~itemは，原文では変数として~mark-upされているが、
~keyframeごとに異なる~instanceを成すので，このように改める。
】</p>

◎
Let keyframes be an empty sequence of keyframe objects, each possessing a keyframe offset, keyframe timing function, keyframe composite, and keyframe values.
</li>
			<li>
%~animateされる~prop群 ~LET 空な集合
（この集合は、
~CSS~prop名たちからなる。）
◎
Let animated properties be an empty set of CSS property names.
</li>
			<li>
%~keyframe規則 ~LET ε
◎
↓↓</li>
			<li>
%初期~keyframe ~LET ε
◎
↓↓</li>
			<li>
%最終-~keyframe ~LET ε
◎
↓↓</li>
		</ul>
	</li>
	<li>
<p>
（この段は、
利用する `keyframes$at ~at-規則を決定する）：
</p>
		<ol>
			<li>
%規則~名 ~LET ［
%要素 の `animation-name$p ~propの`算出d値$
］を成す，対応している値
</li>
			<li>
~IF［
%規則~名 ~NEQ `none＠~CSSANIM#valdef-animation-name-none$v
］
⇒
%~keyframe規則 ~SET 次を満たす `keyframes$at ~at-規則は［
在るならば，それらのうち文書~順序で最後のもの／
無いならば ε
］
⇒
その導入部を成す `keyframes-name$t は %規則~名 に合致している
</li>
			<li>
<p>
~IF［
%~keyframe規則 ~EQ ε
］
⇒
~RET
</p>

<p>
この事例では、
~animationは生成されず，
%規則~名 に合致している既存の~animationも取消される。
</p>
			</li>
		</ol>
◎
↓↓ Collect Declared Keyframes:
• Find the last @keyframes at-rule in document order with &lt;keyframes-name&gt; matching the corresponding animation-name value name.
◎
• If there is no @keyframes at-rule with &lt;keyframes-name&gt; matching name (or if name is none), abort this procedure. In this case no animation is generated, and any existing animation matching name is canceled.
</li>
	<li>
%~keyframe~block群 ~LET ［
%~keyframe規則 を成す `keyframe-block$t たち
］が成す文書~順序による`~list$
◎
↓</li>
	<li>
%~keyframe~block~map ~LET 新たな`~map$
◎
↓</li>
	<li>
<p>
（この段は、
宣言された~keyframeたちを~offset別に~group化する。）
</p>

<p>
%~keyframe~block群 を成す
~EACH( %~block )
に対し：
</p>
		<ol>
			<li>
<p>
%~block の導入部にて指定された【！指定d値】
~EACH( `keyframe-selector$t %~offset )
に対し：
</p>
				<ol>
					<li>
%~offset ~SET %~offset が表現する`~offset$kF
— ~keyword［
`form^v ／ `to^v
］は［
`0%^v ／ `100%^v
］として扱う
</li>
					<li>
~IF［
%~keyframe~block~map[ %~offset ] ~EQ ε
］
⇒
%~keyframe~block~map[ %~offset ] ~SET 新たな`~list$
</li>
					<li>
%~keyframe~block~map[ %~offset ] に %~block を`付加する$
</li>
				</ol>
			</li>
		</ol>

<p class="trans-note">【
%~keyframe~block~map における~keyの同等性は，
`~offset$kFの同等性に基づくが、
それは，実装がそれ用に格納する~dataの精度に依存する
（極めて近い数（例： `0%^v と `0.000000001%^v ）が同じ~offsetと見なされるかどうかは、
実装依存になる）。
】【
`~offset$kFを与える `keyframe-selector$t がとり得る値は、
他の~moduleにより拡げられている
（例： `timeline-range-name$t ）
— それらの新たな値で表現される~offsetは、
従来の値で表現される~offsetとは別個なものと見なされよう
（少なくとも，この~algoの目的においては）。
】</p>
◎
Group together all keyframe blocks that share the same specified &lt;keyframe-selector&gt; (treating from as 0% and to as 100%),＼
</li>
	<li>
<p class="trans-note">【
この段は、
以降を簡素化するための，この訳による追加：
】</p>
		<ol>
			<li>
~IF［
%~keyframe~block~map[ 0% ] ~EQ ε
］
⇒
%~keyframe~block~map[ 0% ] ~SET « 空な~block »
</li>
			<li>
~IF［
%~keyframe~block~map[ 100% ] ~EQ ε
］
⇒
%~keyframe~block~map[ 100% ] ~SET « 空な~block »
</li>
		</ol>
◎
↓</li>
	<li>
<p>
（この段は、
各~keyframe内の宣言たちを収集する。）
</p>

<p>
%~keyframe~block~map を成す
~EACH( %~offset → %~block群 )
に対し：
</p>
		<ol>
			<li>
%最後に宣言された計時~関数 ~SET %既定の計時~関数
</li>
			<li>
%最後に宣言された組成法 ~SET %既定の組成法
</li>
			<li>
%~block群 を成す
~EACH( %~block )
に対し：
				<ol>
					<li>
~IF［
%~block 内に `animation-timing-function$p は宣言されている
］
⇒
%最後に宣言された計時~関数 ~SET %~block 内で最後に宣言された `animation-timing-function$p の`算出d値$
</li>
					<li>
~IF［
%~block 内に `animation-composition$p は宣言されている
］
⇒
%最後に宣言された組成法 ~SET %~block 内で最後に宣言された `animation-composition$p の`算出d値$
</li>
				</ol>
			</li>
			<li>
%値~群 ~LET 新たな`~map$
</li>
			<li>
<p>
【！~TR/CSS21/syndata.html#x14】
【！宣言~block~CSSOM1#css-declaration-block】
%~block群 を成す~blockたちに`~cascade$を適用する `CSS-CASCADE-4$r
— ここでは
⇒＃
%~block群 の順序（すなわち，文書~順序）で最も後に宣言された~prop宣言が優先されることになる。
“~animate不可” とされた~propは無視する。
</p>

<p>
その結果を成す
~EACH( `宣言d値$ %値 )
に対し
⇒
%値~群[ %値 を与えた~CSS~propの名前 ] ~SET %値
</p>

<p class="note">注記：
`~cascade$は、［
各`略式~prop$を その`下位prop$に展開する
］ことに加え［
%要素 の【！`算出d$】`書字~mode$に則って，
各`論理-~prop~group$内の対応する~prop~pairを一緒に対応付ける
］ことになる。
</p>
			</li>
			<li>
%~keyframe ~LET 次を伴う新たな~keyframe~obj
⇒＃
`~offset$kF ~SET %~offset,
`計時~関数$kF ~SET %最後に宣言された計時~関数,
`組成法$kF ~SET %最後に宣言された組成法,
`値~群$kF ~SET %値~群
</li>
			<li>
%~keyframe群 に %~keyframe を`付加する$
</li>
			<li>
%~animateされる~prop群 に %値~群 を成す各~propの名前を追加する
</li>
			<li>
~IF［
%~offset ~EQ 0%
］
⇒
%初期~keyframe ~SET %~keyframe
</li>
			<li>
~IF［
%~offset ~EQ 100%
］
⇒
%最終-~keyframe ~SET %~keyframe
</li>
		</ol>

◎
last declared animation-timing-function computed value (defaulting to default timing function if there is no such declaration), and last declared animation-composition computed value (defaulting to default composite if there is no such declaration).
◎
For each such group of matching keyframe blocks, ordered by their earliest keyframe block in the sorted order:
◎
Cascade together all of its declaration blocks such that for each CSS property (except those that are “not animatable”, which must be ignored) the last declaration among all its keyframe blocks takes precedence. [CSS-CASCADE-4]
◎
Note: The cascade will expand shorthand properties into their sub-properties and map together corresponding property pairs in each logical property group according to the element’s computed writing mode.
◎
Append to keyframes a new empty keyframe keyframe with the group’s keyframe offset, keyframe timing function, and keyframe composite. Give its keyframe values the set of declared values resulting from this cascade.
◎
Add each property name that was added to its keyframe properties to animated properties.
</li>
	<li>
<p>
（この段は、［
0% ／ 100%
］~keyframeに指定されなかった値を追加する）：
</p>

<p>
« %初期~keyframe, %最終-~keyframe » を成す
~EACH( %初期または最終-~keyframe )
に対し：
</p>
		<ol>
			<li>
<p>
%~animateされる~prop群 を成す
~EACH( %~prop )
に対し：
</p>
				<ol>
					<li>
~IF［
%初期または最終-~keyframe の`値~群$kF[ %~prop ] ~NEQ ε
］
⇒
~CONTINUE
</li>
					<li>
<p>
%~keyframe群
を成す
~EACH( %~keyframe )
に対し：
</p>
						<ol>
							<li>
~IF［
%~keyframe の`値~群$kF[ %~prop ] ~EQ ε
］
⇒
~CONTINUE
</li>
							<li>
<p>
~IF［
~OR↓
］…
</p>
								<ul>
									<li>
［
%初期または最終-~keyframe ~EQ %初期~keyframe
］~AND［
%~keyframe は，
`使用~keyframe順序$においては %初期~keyframe より前に位置する
］
</li>
									<li>
［
%初期または最終-~keyframe ~EQ %最終-~keyframe
］~AND［
%~keyframe は，
`使用~keyframe順序$においては %最終-~keyframe より後に位置する
］
</li>
								</ul>
<p>
…ならば
⇒
%初期または最終-~keyframe の`値~群$kF[ %~prop ] ~SET %要素 上での %~prop の`算出d値$
</p>
							</li>
						</ol>
					</li>
				</ol>
			</li>
			<li>
~IF［
%初期または最終-~keyframe の`値~群$kFは空である
］
⇒
%~keyframe群 から %初期または最終-~keyframe を除去する
</li>
		</ol>
◎
Generate Initial and Final Frames:
• Find or create the initial keyframe, a keyframe with a keyframe offset of 0%, default timing function as its keyframe timing function, and default composite as its keyframe composite.
• For any property in animated properties that is not otherwise present in a keyframe with an offset of 0% or one that would be positioned earlier in the used keyframe order, add the computed value of that property on element to initial keyframe’s keyframe values.
• If initial keyframe’s keyframe values is not empty, prepend initial keyframe to keyframes.
• Repeat for final keyframe, using an offset of 100%, considering keyframes positioned later in the used keyframe order, and appending to keyframes.
</li>
	<li>
<p>
（この段は、
~keyframeたちを~sortする）：
◎
Sort Frames:
</p>
		<ul>
			<li>
%~keyframe群 の
`指定d~keyframe順序@
は、
上の手続きによる結果の順序である
（すなわち、
文書~順序
— 同じ`~offset$kFを伴う~keyframeたちは、
それらのうち最初に位置する~keyframeに縮約される）。
◎
The specified order of keyframes is the order resulting from the steps above, i.e. document order with duplicate keyframes collapsed to the earliest position.
</li>
			<li>
<p>
%~keyframe群 の
`算出d~keyframe順序@
は、
`getKeyframes()$m により返される順序であり，次により見出される
⇒
~keyframeのうち［
その`~offset$kFが［
`percentage$t ／ `from^v ／ `to^v
］で指定されたもの†
］を~listの先頭へ移した上で，
【！上で生成され得る %初期~keyframe も含む】
それらの~keyframeに対し`~offset$kFによる安定-~sortを遂行する
</p>

<p class="trans-note">【†
この~moduleに限れば，（これを書いた時点では）すべての~keyframeが該当するが、
それ以外の~keyframeも存在し得る（下の注記）。
】</p>
◎
The computed order of keyframes—which is the order returned by getKeyframes()—is found by shifting any keyframes whose offset was specified as a &lt;percentage&gt;, from keyword, or to keyword to the front of the list (after the generated initial keyframe, if any), and performing a stable sort on these keyframes by their keyframe offsets.
</li>
			<li>
<p>
%~keyframe群 の
`使用~keyframe順序@
は、
実際の~animation~frameを補間して算出するために利用される順序であり，次により見出される
⇒＃
%~keyframe群 を成す各~keyframeを~animation効果の時列線に付する,
`反復~回数$ ~EQ 1 と見做す,
早いもの順にする,
`算出d~keyframe順序$を利用して `breaking ties^en †
</p>

<p class="trans-note">【†
おそらく、
順序が決定できない場合は，算出d~keyframe順序に従う。
】【
これらが何を意味するか知るには、
他の~module
— `SCROLL-ANIMATIONS-1$r, `WEB-ANIMATIONS$r, `WEB-ANIMATIONS-2$r など —
を調べる必要がある。
】</p>
◎
The used order of keyframes—which is the order used to interpolate and compute the actual animation frames—is found by attaching the keyframes onto the animation effect’s timeline assuming an iteration count of 1 and ordering them from earliest to latest, breaking ties by using the computed keyframe order.
</li>
		</ul>

<p class="issue">
この仕様により導入された［
算出d~keyframeたちの~sort法／
使用~keyframeたちの~sort法
］に対する特有な要件は、
`WEB-ANIMATIONS$r ［
`§ 算出d~keyframeの計算-法＠~WANIM#calculating-computed-keyframes$／
`§ ~keyframe効果の効果~値＠~WANIM#the-effect-value-of-a-keyframe-animation-effect$
］の中へ統合されるべきである。
上の記述
— これらの~keyframeたちが成す集合どうしの区別 —
は、
規範的でない注記へ移動されるべきである。
◎
Any specific requirements on sorting computed keyframes introduced by this spec should be integrated into Web Animations § 5.3.3 Calculating computed keyframes. Any specific requirements on used keyframes introduced by this spec should be integrated into Web Animations § 5.3.4 The effect value of a keyframe effect. The above description of the distinction between these sets of keyframes should be moved to an informative note.
</p>

<p class="note">注記：
~keyframeたちの`算出d~keyframe順序$は、
`percentage$t ~offsetで~sortされるが，［
`timeline-range-name$t で指定される~keyframeたちの`指定d~keyframe順序$
］を保守する
— それらが`使用~keyframe順序$では，より後に来る場合でも，
（生成された 100% ~keyframe 以外の）他の `percentage$t ~keyframeよりも後になるよう。
◎
Note: Although the computed keyframe order sorts keyframes with &lt;percentage&gt; offsets, it maintains keyframes specified with a &lt;timeline-range-name&gt; in their specified keyframe order—after any &lt;percentage&gt; keyframes (other than a generated final keyframe), even if these come later in the used keyframe order.
</p>
	</li>
</ol>

		</section>
	</section>
	<section id="animation-definition">
<h2 title="Declaring Animations">4. ~animationの宣言-法</h2>

<p>
`~CSS~animation^i は、［
各種 `animation-*^p ~propを利用して，~keyframeを要素に束縛する
］ことにより，定義される。
これらの~list値をとる~prop
— `animation$p `略式~prop$の`下位prop$すべて —
は、
`協調している~list~prop~group$を形成する。
`animation-name$p が，`協調している基底~list~prop$になり、
`協調される値~list$を成す各~itemは， 1 個の~animation効果の~prop群を定義する。
◎
CSS Animations are defined by binding keyframes to an element using the animation-* properties. These list-valued properties, which are all longhands of the animation shorthand, form a coordinating list property group with animation-name as the coordinating list base property and each item in the coordinated value list defining the properties of a single animation effect.
</p>

<p>
個々の `animation-*^p ~propの値どうしが どう協調するかについては、
`CSS-VALUES-4$r `§ 協調している~list値をとる~prop群＠~CSSVAL#linked-properties$
を見よ。
◎
See CSS Values 4 § A Coordinating List-Valued Properties for how the individual animation-* property values coordinate.
</p>

		<section id="animation-duration">
<h3 title="The animation-duration property">4.1. `animation-duration^p ~prop</h3>

<div>
◎名 `animation-duration@p
◎値 [ `auto$v | `time[0s,∞]$t ]#
◎初 `auto$v
◎適 すべての要素
◎継 されない
◎百 受容しない
◎算 
［
`time$t ／~keyword `auto$v
］たちが成す~list
◎順 文法に従う
◎ア ~animate不可
◎表終

◎
Name: 	animation-duration
Value: 	[ auto | &lt;time [0s,∞]&gt; ]#
Initial: 	auto
Applies to: 	all elements
Inherited: 	no
Percentages: 	N/A
Computed value: 	list, each item either a time or the keyword auto
Canonical order: 	per grammar
Animation type: 	not animatable
</div>

<p>
`animation-duration$p は、
当の`~animation$に`結付けられた効果$の`反復~所要時間$を指定する。
◎
The animation-duration property specifies the iteration duration of the animation’s associated animation effect.
</p>

<dl>
	<dt>`auto@v</dt>
	<dd>
時間~駆動な~animation用には、
`0s^v と等価。
◎
For time-driven animations, equivalent to 0s.
</dd>
	<dd>
`~scroll駆動な~animation$用には、［
`animation-range$p,
`animation-delay$p,
`animation-iteration-count$p
］も考慮に入れる下で［
当の時列線を延伸するために必要yな所要時間
］と等価。
`SCROLL-ANIMATIONS-1$r
`§ 有限な時列線の計算＠~SCROLL-ANIM#finite-attachment$
を見よ。
◎
For scroll-driven animations, equivalent to the duration necessary to fill the timeline in consideration of animation-range, animation-delay, and animation-iteration-count. See Scroll-driven Animations § 4.1 Finite Timeline Calculations.
</dd>

	<dt id="valdef-animation-duration-time-0s">`time[0s,∞]$t</dt>
	<dd>
時間~駆動な~animation用には、
~animationが 1 周回を完了するまにかかる時間の長さを指定する。
負な `time$t は無効。
◎
For time-driven animations, specifies the length of time that an animation takes to complete one cycle. A negative &lt;time&gt; is invalid.
</dd>
	<dd>
`~scroll駆動な~animation$用には、
`auto$v として扱われる。
◎
For scroll-driven animations, treated as auto.
</dd>
</dl>

<p>
`animation-duration$p の`使用~値$が `0s^v になる場合でも、
当の~animation自体は（瞬間的に）生じる
— それに伴い：
◎
If the used animation-duration is 0s, the animation itself still occurs (instantaneously).＼
</p>
<ul>
	<li>
［
`animationend$et, `animationstart$et【！start and end】
］~eventも発火される。
◎
The animation’s start and end events are still fired.＼
</li>
	<li>
`animation-fill-mode$p に応じて：
［
`backwards＠~CSSANIM#valdef-animation-fill-mode-backwards$v ／
`forwards＠~CSSANIM#valdef-animation-fill-mode-forwards$v ／
`both＠~CSSANIM#valdef-animation-fill-mode-both$v
］の場合、
当の~animationの［
最初の~frame／最後の~frame／最初と最後の~frame
］が
`animation-delay$p 【による遅延~期間】の［
間／後／間と後
］に（ `animation-direction$p にて定義されるとおり）表示されることになる。
`none＠~CSSANIM#valdef-animation-fill-mode-none$v の場合、
当の~animationの~keyframeによる目に見える効果は無い。
◎
If animation-fill-mode is set to backwards or both, the first frame of the animation (as defined by animation-direction) will be displayed during the animation-delay; and if animation-fill-mode is set to forwards or both, the last frame of the animation (as defined by animation-direction) will be displayed after the animation-delay. However, if animation-fill-mode is set to none the keyframes of the animation animation will have no noticeable effect.
</li>
</ul>

<p>
`~level 1$ との後方-互換性を得るため、
`animation-timeline$p の`算出d値$が `auto＠#valdef-animation-timeline-auto$v になる場合
（すなわち、
~listを成す値は 1 個の `auto^v のみである）、
`animation-duration$p 用の値 `auto$v の`解決d値$は，
その`使用~値$が `0s^v になるときは `0s^v になるとする。
◎
For backwards-compatibility with Level 1, when the computed value of animation-timeline is auto (i.e. only one list value, and that value being auto), the resolved value of auto for animation-duration is 0s whenever its used value would also be 0s.
</p>

		</section>
		<section id="animation-timing-function">
<h3 title="The animation-timing-function property">4.2. `animation-timing-function$p ~prop</h3>

<p>
`animation-timing-function$p は、
各`~keyframe$に適用される`計時~関数$を
— `§ ~keyframeの組立-法＠#keyframes$
にて定義されるとおり —
決定するために利用される。
◎
The animation-timing-function is used to determine the timing function applied to each keyframe as defined in § 3 Assembling Keyframes.
</p>

		</section>
		<section id="animation-iteration-count">
<h3 title="The animation-iteration-count property">4.3. `animation-iteration-count$p ~prop</h3>

<p>
`animation-iteration-count$p は、
当の`~animation$に`結付けられた効果$の`反復~回数$を指定する。
◎
The animation-iteration-count property specifies the iteration count of the animation’s associated animation effect.
</p>

		</section>
		<section id="animation-direction">
<h3 title="The animation-direction property">4.4. `animation-direction$p ~prop</h3>

<p>
`animation-direction$p は、
当の`~animation$に`結付けられた効果$の`再生~方向$を指定する。
◎
The animation-direction property specifies the playback direction of the animation’s associated animation effect.
</p>

		</section>
		<section id="animation-play-state">
<h3 title="The animation-play-state property">4.5. `animation-play-state$p ~prop</h3>

<p>
`animation-play-state$p は、
当の`~animation$を［
静止する／再生する
］ために利用される。
◎
The animation-play-state is used to pause or play the animation.
</p>

<p>
実装は、
どの時点であれ
— 当の~animationが最初に生成されたときも含め —
所与の
( `~animation$ %~animation )
に対応する `animation-play-state$p の`解決d値$が新たに：
◎
↓</p>

<ul>
	<li>
`running＠~CSSANIM#valdef-animation-play-state-running$v になったときは，次を走らすモノトスル
⇒
`~animationを再生する$( %~animation, `自動で巻戻す^i )
◎
If at any time, including when the animation is first generated, the resolved value of animation-play-state corresponding to an animation is newly running, the implementation must run the procedure to play an animation for the given animation with the auto-rewind flag set to false.
</li>
	<li>
`paused＠~CSSANIM#valdef-animation-play-state-paused$v になったときは，次を走らすモノトスル
⇒
`~animationを静止する$( %~animation )
◎
If at any time, including when the animation is first generated, the resolved value of animation-play-state corresponding to an animation is newly paused, the implementation must run the procedure to pause an animation for the given animation.
</li>
</ul>

<p>
上の要件は、
~animationの`再生-状態$が
— `§ ~animation＠#animations$
にて述べられるとおり —
~WAnim~APIにより上書きされている場合には，適用されない。
◎
The above requirements do not apply if the animation’s play state is being overridden by the Web Animations API as described in § 2 Animations.
</p>

		</section>
		<section id="animation-delay">
<h3 title="The animation-delay property">4.6. `animation-delay$p ~prop</h3>

<p>
`animation-delay$p は、
当の`~animation$に`結付けられた効果$の`開始-遅延$を指定する。
◎
The animation-delay property specifies the start delay of the animation’s associated animation effect.
</p>

		</section>
		<section id="animation-fill-mode">
<h3 title="The animation-fill-mode property">4.7. `animation-fill-mode$p ~prop</h3>

<p>
`animation-fill-mode$p は、
当の`~animation$に`結付けられた効果$の`延伸~mode$を指定する。
◎
The animation-fill-mode property specifies the fill mode of the animation’s associated animation effect.
</p>

		</section>
		<section id="animation-composition">
<h3 title="The animation-composition property">4.8. `animation-composition^p ~prop</h3>

<p>
`animation-composition$p ~propは、［
複数の~animationが同じ~propに同時に影響する場合
］に利用される`組成-演算~型$を定義する。
◎
The animation-composition property defines the composite operation used when multiple animations affect the same property simultaneously.
</p>

<div>
◎名 `animation-composition@p
◎値 `single-animation-composition$t#
◎初 `replace$v
◎適 `すべての要素$
◎継 されない
◎百 受容しない
◎算 指定された~keywordたちが成す~list
◎順 文法に従う
◎ア ~animate不可
◎表終

◎
Name: 	animation-composition
Value: 	&lt;single-animation-composition&gt;#
Initial: 	replace
Applies to: 	all elements
Inherited: 	no
Percentages: 	N/A
Computed value: 	list, each item a keyword as specified
Canonical order: 	per grammar
Animation type: 	not animatable 
</div>

<pre class="prod">
`single-animation-composition@t
	= `replace$v
	| `add$v
	| `accumulate$v
</pre>

<p>
各種 値［
`replace@v ／ `add@v ／ `accumulate@v
］の意味は、
~WAnimに定義される`組成-演算~型$［
置換-型 ／ 加算-型 ／ 累積-型
］と同じとする。
`WEB-ANIMATIONS$r
◎
The values of animation-composition have the meaning defined for the corresponding values of the composite operation defined in Web Animations [WEB-ANIMATIONS].
</p>

<p>
~keyframe内に指定された `animation-composition$p は、
その~keyframe内に指定された各~prop用に
— 各~propごとに，それを指定している次の~keyframeまで —
利用する組成-演算を定義する。
◎
When specified in a keyframe, animation-composition defines the composite operation to use for each property specified in that keyframe until the next keyframe specifying each property.
</p>

<div class="example">
<p>
例えば，次の~stylesheetは、
`scale$p ~propを~targetにする 2 個の異なる~animationを定義している。
◎
For example, the following stylesheet defines two different animations targetting the scale property.
</p>

<pre class="lang-css">
@keyframes heartbeat {
  from {
    scale: 1;
    animation-timing-function: ease-out;
  }
  30% {
    scale: 1.3;
  }
}
.heartbeat {
  animation: heartbeat 0.3s 2s infinite;
}

@keyframes throb {
  50% {
    scale: 1.8;
  }
}
.icon:mouseover {
  animation: throb 0.4s add;
}
</pre>

<p>
これら 2 個の~animationが同じ要素に適用された場合，
通常は片方の~animationだけ適用されることになるが、
2 個目の~animationの `animation-composition$p に `add$v を指定した場合，
この 2 個の~animationは結合されることになる。
◎
If these two animations are applied to the same element, normally only one animation would apply, but by specifying add as the animation-composition on the second animation, the result of the two animations will be combined.
</p>

<p>
`~CSS遷移^i `CSS3-TRANSITIONS$r の`組成-順序$は， `~CSS~animation^i より前なので、
次の例のように
`animation-composition$p を利用して， `~CSS~animation^i と下層の遷移とを結合することもアリになる：
◎
Since CSS Transitions [CSS3-TRANSITIONS] have a lower composite order, it is possible to use animation-composition to combine CSS Animations with underlying transitions as in the following example.
</p>

<pre class="lang-css">
.icon {
  filter: blur(20px);
  transition: filter 0.5s;
}
.icon:hover {
  filter: blur(0px);
  animation: brightness-pulse 3s infinite add;
}

@keyframes brightness-pulse {
  0% {
    scale: 1.1;
    filter: brightness(130%);
  }
  10% {
    scale: 1;
    filter: brightness(100%);
  }
}
</pre>

<p class="issue">
これらの例の絵図を作成して、
それらがイミを成すことを検証yする。
◎
Create pictures of these examples and verify they make sense.
</p>
</div>

		</section>
		<section id="animation-timeline">
<h3 title="The animation-timeline property">4.9. `animation-timeline^p ~prop</h3>

<p>
`animation-timeline$p ~propは、
~animationとともに利用される`時列線$を定義する。
◎
The animation-timeline property defines the timeline used with the animation.
</p>

<p class="note">注記：
この仕様は、
~animation用の時列線を指定するための構文は何も導入しない
— それは、
他の仕様
— `SCROLL-ANIMATIONS-1$r【！`SCROLL-ANIMATIONS$r】 など —
に委ねられる。
◎
Note: This specification does not introduce any syntax to specify animation timelines but instead it is up to others specifications such as Scroll-linked Animations [SCROLL-ANIMATIONS] to do so.
</p>

<div>
◎名 `animation-timeline@p
◎値 `single-animation-timeline$t#
◎初 `auto^v
◎適 `すべての要素$
◎継 されない
◎百 受容しない
◎算 ~list
— 各~itemは、
次に挙げるいずれか
⇒＃
~keyword `none$v ／
~keyword `auto$v ／
`~CSS識別子$（文字大小区別）／
`scroll$f 関数の算出d値／
`view$f 関数の算出d値
◎順 文法に従う
◎ア ~animate不可
◎表終

◎
Name: 	animation-timeline
Value: 	&lt;single-animation-timeline&gt;#
Initial: 	auto
Applies to: 	all elements
Inherited: 	no
Percentages: 	N/A
Computed value: 	list, each item either the keyword none, the keyword auto, a case-sensitive css identifier, a computed scroll() function, or a computed view() function
Canonical order: 	per grammar
Animation type: 	not animatable 
</div>

<pre class="prod">
`single-animation-timeline@t
	= auto
	| none
	| `dashed-ident$t
	| `scroll()$t
	| `view()$t
</pre>

<p>
`animation-timeline$p ~propは、［
`animation-name$p, `animation-duration$p
］の様な~propに類似する
— それは， 1 個以上の値をとり、
各~値は，当の要素~上の対応する`~animation$に時列線
— <a href="~CSSANIM#animation-name">§ `animation-name^p ~prop</a>
に述べられるとおり，当の~animationに合致しておかれたそれ —
を伴わせる，追加的な挙動を授ける。
◎
The animation-timeline property is similar to properties like animation-name and animation-duration in that it can have one or more values, each one imparting additional behavior to a corresponding animation on the element, with the timelines matched up with animations as described here.
</p>

<p>
各~値の型は `single-animation-timeline$t であり、
アリな値には，次に挙げる効果がある：
◎
Each value has type &lt;single-animation-timeline&gt;, whose possible values have the following effects:
</p>

<dl class="valdef">
	<dt>`auto@v</dt>
	<dd>
当の~animationの`時列線$は、
`DocumentTimeline$I
— より特定的には，`既定の文書~時列線$ —
になる。
◎
The animation’s timeline is a DocumentTimeline, more specifically the default document timeline.
</dd>

	<dt>`none@v</dt>
	<dd>
当の~animationには、
`時列線$は結付けられない。
◎
The animation is not associated with a timeline.
</dd>

	<dt id="valdef-animation-timeline-dashed-ident">`dashed-ident$t</dt>
	<dd>
［
`~scroll進捗~時列線$／
`~view進捗~時列線$
］のうち［
所与の名前で参照され, かつ
この要素を視野に入れるもの
］は在る場合、
それ【それらのうち最も優先されるもの】を利用する
— `SCROLL-ANIMATIONS-1$r
`§ 有名~時列線の視野の宣言-法＠~SCROLL-ANIM#timeline-scope$
（ `timeline-scope^p ~prop）
にて定義されるとおり。
◎
If a named scroll progress timeline or view progress timeline is in scope on this element, use the referenced timeline as defined in Scroll-driven Animations § Declaring a Named Timeline’s Scope: the timeline-scope property.
</dd>
	<dd>
他の場合、
当の~animationには`時列線$は結付けられない。
◎
Otherwise the animation is not associated with a timeline.
</dd>

	<dt id="valdef-animation-timeline-scroll">`scroll()$t</dt>
	<dd>
所与の `scroll^f 関数により指示される`~scroll進捗~時列線$を利用する。
`SCROLL-ANIMATIONS-1$r
<a href="~SCROLL-ANIM#scroll-notation">§ `scroll^f 記法</a>
を見よ。
◎
Use the scroll progress timeline indicated by the given scroll() function. See Scroll-driven Animations § 2.2.1 The scroll() notation.
</dd>

	<dt id="valdef-animation-timeline-view">`view()$t</dt>
	<dd>
所与の `view^f 関数により指示される`~view進捗~時列線$を利用する。
`SCROLL-ANIMATIONS-1$r
<a href="~SCROLL-ANIM#view-notation">§ `view^f 記法</a>
を見よ。
◎
Use the view progress timeline indicated by the given view() function. See Scroll-driven Animations § 3.3.1 The view() notation.
</dd>
</dl>

<p class="issue">
［
`animation-timeline$p が指定されていないとき，
`animation-name$p を利用して時列線を選定する
］ことを もっと容易にする
— ［
最も共通的な~animationが，単純かつ人に易しくなる
］よう，［［
~animationが［
~keyframeたち, 時列線
］どちらにも同じ名前を利用すること
］を可能化するよう，時列線を選定すること
］を［
`animation-name$p に許容する
］ことにより。
`animation-timeline$p ~propが、［
必要yなら，［
~keyframeたち, 時列線
］を独立に選定する
］ための追加的な制御を作者に与える。
◎
Make it easier to use animation-name to select the timeline when animation-timeline is not specified. Allowing animation-name to be used for selecting timeline enables most common animations to have to use a single name for both their keyframes and timeline which is simple and ergonomics. The animation-timeline property gives authors additional control to independently select keyframes and timeline if necessary.
</p>

<p>
複数の `animation-*^p ~propが同時に設定されたときは、
`animation-timeline$p が，最初に更新される。
なので、
例えば `animation-play-state$p に対する変更は，
`animation-timeline$p にて指定された［
同時に適用される時列線
］に適用される。
◎
When multiple animation-* properties are set simultaneously, animation-timeline is updated first, so e.g. a change to animation-play-state applies to the simultaneously-applied timeline specified in animation-timeline.
</p>

		</section>
		<section id="animation-shorthand">
<h3 title="The animation shorthand property">4.10. `animation^p 略式~prop</h3>

<p>
`animation$p 略式~propの構文は、
次に従う
【ように，`~level 1$ から更新された（ `single-animation-timeline$t が追加された）】
：
◎
The animation shorthand property syntax is as follows:
</p>

<pre class="prod">
`single-animation@t
	= `animation-duration$tp
	|| `easing-function$t
	|| `animation-delay$tp
	|| `single-animation-iteration-count$t
	|| `single-animation-direction$t
	|| `single-animation-fill-mode$t
	|| `single-animation-play-state$t
	|| [ `none^v | `keyframes-name$t ]
	|| `single-animation-timeline$t
</pre>

		</section>
	</section>
	<section id="animation-triggers">
<h2 title="Declaring Animation Triggers">5. ~animation誘発体の宣言-法</h2>

<p>
`~animation誘発体$（ `animation trigger^en ）は、
各種 `animation-trigger-*^p ~propを利用して定義される。
これら~list値をとる~prop
— `animation-trigger$p `略式~prop$の`下位prop$すべて —
は、
`協調している~list~prop~group$を形成する。
`animation-name$p が`協調している基底~list~prop$になり、
`協調される値~list$を成す各~itemは， 1 個の~animation誘発体の~prop群を定義する。
◎
Animation Triggers are defined using the animation-trigger-* properties. These list-valued properties, which are all longhands of the animation-trigger shorthand, form a coordinating list property group with animation-name as the coordinating list base property and each item in the coordinated value list defining the properties of a single animation trigger.
</p>

<p class="trans-note">【
`animation-trigger^p 略式~prop自体も `animation^p ~propの下位propなので（次の段落）、
ここでの協調している~list~prop~groupは，
`animation^p の下位propたちとも一緒に~groupを形成することになる。
】</p>

<p>
`animation-trigger$p ~propは、
`animation$p `略式~prop$の`設定し直すのみ$な`下位prop$である。
◎
The animation-trigger properties are reset-only sub-properties of the animation shorthand.
</p>

		<section id="animation-trigger-type">
<h3 title="The animation-trigger-type property">5.1. `animation-trigger-type^p ~prop</h3>

<p>
`animation-trigger-type$p ~propは、
`~animation誘発体$の`種別$aTを指定する。
◎
The animation-trigger-type property specifies the animation trigger type of the animation trigger.
</p>

<div>
◎名 `animation-trigger-type@p
◎値 `single-animation-trigger-type$t#
◎初 `once$v
◎適 すべての要素
◎継 されない
◎百 受容しない
◎算 指定された~keywordたちが成す~list
◎順 文法に従う
◎ア ~animate不可
◎表終

◎
Name: 	animation-trigger-type
Value: 	&lt;single-animation-trigger-type&gt;#
Initial: 	once
Applies to: 	all elements
Inherited: 	no
Percentages: 	N/A
Computed value: 	list, each item a keyword as specified
Canonical order: 	per grammar
Animation type: 	not animatable
</div>

<pre class="prod">
`single-animation-trigger-type@t
	= `once$v
	| `repeat$v
	| `alternate$v
	| `state$v
</pre>

<p>
各種 値の意味は
— 以下における %作動~区間 は、
当の`~animation誘発体$の`作動~区間$aTを指すとする：
◎
The values of animation-trigger-type have the following meaning for an animation trigger that enters its active interval:
</p>

<p class="trans-note">【
以下における “当の~animation” は、
当の`~animation誘発体$を結付けている`~animation$に`結付けられた効果$を指す。
】</p>

<dl class="valdef">
	<dt>`once@v</dt>
	<dd>
当の~animationは、
一回だけ誘発され，再生される
【— `state$v 用の追加的な挙動を伴わずに】。
◎
The animation is triggered and played once and only once.
</dd>

	<dt>`repeat@v</dt>
	<dd>
当の~animationは、
誘発される各回に始めから再生される。
%作動~区間 から抜出たときは、
当の~animationは，設定し直される。
◎
The animation is played from the beginning each time it is triggered. When the trigger’s active interval is exited the animation is reset.
</dd>

	<dt>`alternate@v</dt>
	<dd>
当の~animationは、
誘発される各回に，その`再生~方向$に則って再生される。
%作動~区間 から抜出たときは、
当の~animationの再生~方向は逆になる。
◎
The animation is played forwards, according to its playback direction, each time it is triggered. When the trigger’s active interval is exited the animation is reversed.
</dd>

	<dt>`state@v</dt>
	<dd>
当の~animationは、
一回だけ誘発され，再生される。
%作動~区間 から抜出たとき、
当の~animationは静止される。
%作動~区間 に再び入ったときは、
当の~animationは再開される。
◎
The animation is triggered and played once. When the trigger’s active interval is exited the animation is paused. When the trigger’s active interval is re-entered the animation is resumed.
</dd>
</dl>

<p>
各~値の挙動は、
`WEB-ANIMATIONS-2$r `§ ~animation誘発体の種別＠~WANIM2#trigger-types$
にて更に定義される。
◎
The behavior of each value is defined in Web Animations 2 § 4.6.2 Animation Trigger Types.
</p>

		</section>
		<section id="animation-trigger-timeline">
<h3 title="The animation-trigger-timeline property">5.2. `animation-trigger-timeline^p ~prop</h3>

<p>
`animation-trigger-timeline$p ~propは、
`~animation$に結付けられた`~animation誘発体$の`時列線$を指定する。
◎
The animation-trigger-timeline property specifies the timeline of the animation’s associated animation trigger.
</p>

<div>
◎名 `animation-trigger-timeline@p
◎値 `single-animation-timeline$t#
◎初 `auto$v
◎適 すべての要素
◎継 されない
◎百 受容しない
◎算 ~list
— 各~itemは、
次に挙げるいずれか
⇒＃
`none$v ／
`auto$v ／
`~CSS識別子$（文字大小区別）／
`scroll()$t 関数の算出d値／
`view()$t 関数の算出d値
◎順 文法に従う
◎ア ~animate不可
◎表終

◎
Name: 	animation-trigger-timeline
Value: 	&lt;single-animation-timeline&gt;#
Initial: 	auto
Applies to: 	all elements
Inherited: 	no
Percentages: 	N/A
Computed value: 	list, each item either the keyword none, the keyword auto, a case-sensitive css identifier, a computed scroll() function, or a computed view() function
Canonical order: 	per grammar
Animation type: 	not animatable
</div>

<p>
`animation-trigger-timeline$p 用の各~値の意味は、
`animation-timeline$p 用のそれらと同じである。
◎
The values of animation-trigger-timeline have the same meaning as those of animation-timeline.
</p>

<p class="issue">
時列線 “なし” （ `none^v ）を伴う誘発体は、
おそらく，まだ指定されてない
— それが何を意味するか明確化する必要がある。
◎
Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means.
</p>

		</section>
		<section id="animation-trigger-range">
<h3 title="The animation-trigger-range property">5.3. `animation-trigger-range^p ~prop</h3>

<div>
◎名 `animation-trigger-range@p
◎値 [ `animation-trigger-range-start$tp `animation-trigger-range-end$tp? ]#
◎初 個々の~propを見よ
◎適 個々の~propを見よ
◎継 個々の~propを見よ
◎百 個々の~propを見よ
◎算 個々の~propを見よ
◎順 文法に従う
◎ア 個々の~propを見よ
◎表終

◎
Name: 	animation-trigger-range
Value: 	[ &lt;'animation-trigger-range-start'&gt; &lt;'animation-trigger-range-end'&gt;? ]#
Initial: 	see individual properties
Applies to: 	see individual properties
Inherited: 	see individual properties
Percentages: 	see individual properties
Computed value: 	see individual properties
Animation type: 	see individual properties
Canonical order: 	per grammar
</div>

<p>
`animation-trigger-range$p ~propは、［
`animation-trigger-range-start$p,
`animation-trigger-range-end$p
］を単独の宣言で設定する`略式~prop$であり，
当の`~animation誘発体$に結付けられた`既定の範囲$aTを指定する。
その構文は、
`animation-range$p ~propと同じである。
◎
The animation-trigger-range property is a shorthand that sets animation-trigger-range-start and animation-trigger-range-end together in a single declaration, specifying the animation trigger’s associated default range. It has the same syntax as the animation-range property.
</p>

<p>
`animation-trigger-range$p の挙動は、
`WEB-ANIMATIONS-2$r `§ ~animation誘発体の範囲＠~WANIM2#trigger-ranges$
にて定義される。
◎
The behavior of animation-trigger-range is defined in Web Animations 2 § 4.6.5 Animation Trigger Ranges.
</p>

		</section>
		<section id="animation-trigger-range-start">
<h3 title="The animation-trigger-range-start property">5.4. `animation-trigger-range-start^p ~prop</h3>

<div>
◎名 `animation-trigger-range-start@p
◎値 [ `normal^v | `length-percentage$t | `timeline-range-name$t `length-percentage$t? ]#
◎初 `normal$v
◎適 すべての要素
◎継 されない
◎百
<p>
次に挙げる時列線~範囲に相対的：
</p>
<ul>
	<li>
`timeline-range-name$t と伴に指定された場合
⇒
それにより指定される`有名~時列線~範囲$
</li>
	<li>
他の場合
⇒
当の時列線~全体
</li>
</ul>

◎算 ~list
— 各~itemは、
次に挙げるいずれか
⇒＃
~keyword `normal^v ／
( 時列線~範囲, 進捗~百分率 )
◎順 文法に従う
◎ア ~animate不可
◎表終

◎
Name: 	animation-trigger-range-start
Value: 	[ normal | &lt;length-percentage&gt; | &lt;timeline-range-name&gt; &lt;length-percentage&gt;? ]#
Initial: 	normal
Applies to: 	all elements
Inherited: 	no
Percentages: 	relative to the specified named timeline range if one was specified, else to the entire timeline
Computed value: 	list, each item either the keyword normal or a timeline range and progress percentage
Canonical order: 	per grammar
Animation type: 	not animatable
</div>

<p>
`animation-trigger-range-start$p ~propは、
当の`~animation誘発体$に結付けられた`既定の範囲$aTの始端を指定する。
◎
The animation-trigger-range-start property specifies the start of the animation trigger’s associated default range.
</p>

<p>
`animation-trigger-range-start$p 用の各~値の意味は、
`animation-range-start$p 用のそれらと同じである。
◎
The values of animation-trigger-range-start have the same meaning as those of animation-range-start.
</p>

		</section>
		<section id="animation-trigger-range-end">
<h3 title="The animation-trigger-range-end property">5.5. `animation-trigger-range-end^p ~prop</h3>

<div>
◎名 `animation-trigger-range-end@p
◎値 [ `normal^v | `length-percentage$t | `timeline-range-name$t `length-percentage$t? ]#
◎初 `normal$v
◎適 すべての要素
◎継 されない
◎百 
<p>
次に挙げる時列線~範囲に相対的：
</p>
<ul>
	<li>
`timeline-range-name$t と伴に指定された場合
⇒
それにより指定される`有名~時列線~範囲$
</li>
	<li>
他の場合
⇒
当の時列線~全体
</li>
</ul>
◎算 ~list
— 各~itemは、
次に挙げるいずれか
⇒＃
~keyword `normal^v ／
( 時列線~範囲, 進捗~百分率 )
◎順 文法に従う
◎ア ~animate不可
◎表終

◎
Name: 	animation-trigger-range-end
Value: 	[ normal | &lt;length-percentage&gt; | &lt;timeline-range-name&gt; &lt;length-percentage&gt;? ]#
Initial: 	normal
Applies to: 	all elements
Inherited: 	no
Percentages: 	relative to the specified named timeline range if one was specified, else to the entire timeline
Computed value: 	list, each item either the keyword normal or a timeline range and progress percentage
Canonical order: 	per grammar
Animation type: 	not animatable
</div>

<p>
`animation-trigger-range-end$p ~propは、
当の`~animation誘発体$に結付けられた`既定の範囲$aTの終端を指定する。
◎
The animation-trigger-range-end property specifies the end of the animation trigger’s associated default range.
</p>

<p>
`animation-trigger-range-end$p 用の各~値の意味は、
`animation-range-end$p 用のそれらと同じである。
◎
The values of animation-trigger-range-end have the same meaning as those of animation-range-end.
</p>

		</section>
		<section id="animation-trigger-exit-range">
<h3 title="The animation-trigger-exit-range property">5.6. `animation-trigger-exit-range^p ~prop</h3>

<div>
◎名 `animation-trigger-exit-range@p
◎値 [ `animation-trigger-exit-range-start$tp `animation-trigger-exit-range-end$tp? ]#
◎初 個々の~propを見よ
◎適 個々の~propを見よ
◎継 個々の~propを見よ
◎百 個々の~propを見よ
◎算 個々の~propを見よ
◎順 文法に従う
◎ア 個々の~propを見よ
◎表終

◎
Name: 	animation-trigger-exit-range
Value: 	[ &lt;'animation-trigger-exit-range-start'&gt; &lt;'animation-trigger-exit-range-end'&gt;? ]#
Initial: 	see individual properties
Applies to: 	see individual properties
Inherited: 	see individual properties
Percentages: 	see individual properties
Computed value: 	see individual properties
Animation type: 	see individual properties
Canonical order: 	per grammar
</div>

<p>
`animation-trigger-exit-range$p ~propは、［
`animation-trigger-exit-range-start$p,
`animation-trigger-exit-range-end$p
］を単独の宣言で設定する`略式~prop$であり，
当の`~animation誘発体$に結付けられた`抜出時の範囲$aTを指定する。
その構文は、
~keyword `auto$v が追加されることを除いて，
`animation-range$p ~propと同じである。
◎
The animation-trigger-exit-range property is a shorthand that sets animation-trigger-exit-range-start and animation-trigger-exit-range-end together in a single declaration, specifying the animation trigger’s associated exit range. It has the same syntax as the animation-range property, with the addition of the auto keyword.
</p>

<p>
`抜出時の範囲$aTは、
当の`~animation誘発体$ %誘発体 の`作動~区間$aT %作動~区間 に入ったなら，［
%作動~区間 の~~限界を定義し直す
］よう %誘発体 の`既定の範囲$aTを置換する。
それは、
%誘発体 の`既定の範囲$aTを拡張するために利用される
— 例えば、
%作動~区間 から抜出たとき，避ける必要がある視覚的な不連性が生じ得る事例で。
◎
The exit range replaces the default range once the animation trigger’s active interval is entered, and redefines the extent of the animation trigger’s active interval. It is used to extend the default range, for example, in cases where exiting the active interval may create a visual jump that needs to be avoided.
</p>

<p>
`animation-trigger-exit-range$p の挙動は、
`WEB-ANIMATIONS-2$r `§ ~animation誘発体の範囲＠~WANIM2#trigger-ranges$
にて更に定義される。
◎
The behavior of animation-trigger-exit-range is further defined in Web Animations 2 § 4.6.5 Animation Trigger Ranges.
</p>

		</section>
		<section id="animation-trigger-exit-range-start">
<h3 title="The animation-trigger-exit-range-start property">5.7. `animation-trigger-exit-range-start^p ~prop</h3>

<div>
◎名 `animation-trigger-exit-range-start@p
◎値 [ `auto$v | `normal$v | `length-percentage$t | `timeline-range-name$t `length-percentage$t? ]#
◎初 `auto$v
◎適 すべての要素
◎継 されない
◎百 
<p>
次に挙げる時列線~範囲に相対的：
</p>
<ul>
	<li>
`timeline-range-name$t と伴に指定された場合
⇒
それにより指定される`有名~時列線~範囲$
</li>
	<li>
他の場合
⇒
当の時列線~全体
</li>
</ul>
◎算 ~list
— 各~itemは、
次に挙げるいずれか
⇒＃
~keyword `normal$v ／
( 時列線~範囲, 進捗~百分率 )
◎順 文法に従う
◎ア ~animate不可
◎表終

◎
Name: 	animation-trigger-exit-range-start
Value: 	[ auto | normal | &lt;length-percentage&gt; | &lt;timeline-range-name&gt; &lt;length-percentage&gt;? ]#
Initial: 	auto
Applies to: 	all elements
Inherited: 	no
Percentages: 	relative to the specified named timeline range if one was specified, else to the entire timeline
Computed value: 	list, each item either the keyword normal or a timeline range and progress percentage
Canonical order: 	per grammar
Animation type: 	not animatable
</div>

<p>
`animation-trigger-exit-range-start$p ~propは、
当の`~animation誘発体$に結付けられた`抜出時の範囲$aTの始端を指定する。
◎
The animation-trigger-exit-range-start property specifies the start of the animation trigger’s associated exit range.
</p>

<p>
各種 値の意味は
— 以下においては
⇒＃
%誘発体 は当の`~animation誘発体$,
%抜出時の範囲 は %誘発体 の`抜出時の範囲$aT,
%時列線 は %誘発体 の`時列線$
◎終
を指すとする：
◎
The values of animation-trigger-exit-range-start have the following meaning:
</p>

<dl class="valdef">
	<dt>`auto@v</dt>
	<dd>
%抜出時の範囲 の始端は、
%誘発体 の`既定の範囲$aTの始端に等しくなる。
◎
The start of the trigger’s exit range is equal to the start of its default range.
</dd>

	<dt>`normal@v</dt>
	<dd>
%抜出時の範囲 の始端は、
%時列線 の始端になる。
%誘発体 の`作動~区間$aTの始端は、
通常通り決定される。
◎
The start of the trigger’s exit range is the start of its associated timeline; the start of the trigger’s active interval is determined as normal.
</dd>

	<dt id="valdef-animation-trigger-exit-range-start-length-percentage">`length-percentage$t</dt>
	<dd>
%抜出時の範囲 の始端は、
%時列線 上の［
%時列線 の始端から測定して，
`length-percentage$t により指定された長さにある地点
］になる。
◎
The exit range starts at the specified point on the timeline measuring from the start of the timeline.
</dd>

	<dt id="valdef-animation-trigger-exit-range-start-timeline-range-name-length-percentage">`timeline-range-name$t `length-percentage$t?</dt>
	<dd>
%抜出時の範囲 の始端は、
%時列線 上の［
`timeline-range-name$t により指定された`有名~時列線~範囲$の始端から測定して，
`length-percentage$t により指定された長さにある地点
］になる。
`length-percentage$t が省略された場合の既定は、
0% とする。
◎
The exit range starts at the specified point on the timeline measuring from the start of the specified named timeline range. If the &lt;length-percentage&gt; is omitted, it defaults to 0%.
</dd>
</dl>

		</section>
		<section id="animation-trigger-exit-range-end">
<h3 title="The animation-trigger-exit-range-end property">5.8. `animation-trigger-exit-range-end^p ~prop</h3>

<div>
◎名 `animation-trigger-exit-range-end@p
◎値 [ `auto$v | `normal$v | `length-percentage$t | `timeline-range-name$t `length-percentage$t? ]#
◎初 `auto$v
◎適 すべての要素
◎継 されない
◎百 
<p>
次に挙げる時列線~範囲に相対的：
</p>
<ul>
	<li>
`timeline-range-name$t と伴に指定された場合
⇒
それにより指定される`有名~時列線~範囲$
</li>
	<li>
他の場合
⇒
当の時列線~全体
</li>
</ul>
◎算 ~list
— 各~itemは、
次に挙げるいずれか
⇒＃
~keyword `normal$v ／
( 時列線~範囲, 進捗~百分率 )
◎順 文法に従う
◎ア ~animate不可
◎表終

◎
Name: 	animation-trigger-exit-range-end
Value: 	[ auto | normal | &lt;length-percentage&gt; | &lt;timeline-range-name&gt; &lt;length-percentage&gt;? ]#
Initial: 	auto
Applies to: 	all elements
Inherited: 	no
Percentages: 	relative to the specified named timeline range if one was specified, else to the entire timeline
Computed value: 	list, each item either the keyword normal or a timeline range and progress percentage
Canonical order: 	per grammar
Animation type: 	not animatable
</div>

<p>
`animation-trigger-exit-range-end$p ~propは、
`~animation誘発体$に結付けられた`抜出時の範囲$aTの終端を指定する。
◎
The animation-trigger-exit-range-end property specifies the end of the animation trigger’s associated exit range.
</p>

<p>
各種 値の意味は
— 以下においては
⇒＃
%誘発体 は当の`~animation誘発体$,
%抜出時の範囲 は %誘発体 の`抜出時の範囲$aT,
%時列線 は %誘発体 の`時列線$
◎終
を指すとする：
◎
The values of animation-trigger-exit-range-start have the following meaning:
</p>

<dl class="valdef">
	<dt>`auto@v</dt>
	<dd>
%抜出時の範囲 の終端は、
%誘発体 の`既定の範囲$aTの終端に等しくなる。
◎
The end of the trigger’s exit range is equal to the end of its default range.
</dd>

	<dt>`normal@v</dt>
	<dd>
%抜出時の範囲 の終端は、
%時列線 の終端になる。
%誘発体 の`作動~区間$aTの終端は、
通常通り決定される。
◎
The end of the trigger’s exit range is the end of its associated timeline; the end of the trigger’s active interval is determined as normal.
</dd>

	<dt id="valdef-animation-trigger-exit-range-end-length-percentage">`length-percentage$t</dt>
	<dd>
%抜出時の範囲 の終端は、
%時列線 上の［
%時列線 の始端から測定して，
`length-percentage$t により指定された長さにある地点
］になる。
◎
The exit range ends at the specified point on the timeline measuring from the start of the timeline.
</dd>

	<dt id="valdef-animation-trigger-exit-range-end-timeline-range-name-length-percentage">`timeline-range-name$t `length-percentage$t?</dt>
	<dd>
%抜出時の範囲 の終端は、
%時列線 上の［
`timeline-range-name$t により指定された`有名~時列線~範囲$の始端から測定して，
`length-percentage$t により指定された長さにある地点
］になる。
`length-percentage$t が省略された場合の既定は、
100% とする。
◎
The exit range ends at the specified point on the timeline measuring from the start of the specified named timeline range. If the &lt;length-percentage&gt; is omitted, it defaults to 100%.
</dd>
</dl>

		</section>
		<section id="animation-trigger">
<h3 title="The animation-trigger property">5.9. `animation-trigger^p ~prop</h3>

<p>
`animation-trigger$p ~propは、
次に挙げる~propを単独の宣言で設定する`略式~prop$であり，
~animation用の`~animation誘発体$を指定する
⇒＃
`animation-trigger-type$p,
`animation-trigger-timeline$p,
`animation-trigger-range-start$p,
`animation-trigger-range-end$p,
`animation-trigger-exit-range-start$p,
`animation-trigger-exit-range-end$p
◎
The animation-trigger property is a shorthand that sets animation-trigger-type, animation-trigger-timeline, animation-trigger-range-start, animation-trigger-range-end, animation-trigger-exit-range-start, and animation-trigger-exit-range-end together in a single declaration, specifying the animation trigger for an animation.
</p>

<div>
◎名 `animation-trigger@p
◎値 `single-animation-trigger$t#
◎初 個々の~propを見よ
◎適 すべての要素
◎継 されない
◎百 受容しない
◎算 個々の~propを見よ
◎順 文法に従う
◎ア ~animate不可
◎表終

◎
Name: 	animation-trigger
Value: 	&lt;single-animation-trigger&gt;#
Initial: 	see individual properties
Applies to: 	all elements
Inherited: 	no
Percentages: 	N/A
Computed value: 	see individual properties
Canonical order: 	per grammar
Animation type: 	not animatable
</div>

<pre class="prod">
`single-animation-trigger@t
	= `single-animation-trigger-type$t || [ `none^v | `auto^v | [Ⓐ][Ⓑ]{0,4} ]
Ⓐ
	= `dashed-ident$t
	| `scroll()$t
	| `view()$t
Ⓑ
	= `normal^v
	| `length-percentage$t
	| `timeline-range-name$t `length-percentage$t?
</pre>

<p class="trans-note">【
ⒶⒷ は、
簡明にするためのこの訳による追加。
】</p>

		</section>
	</section>
	<section id="events">
<h2 title="Animation Events">6. ~animation~event</h2>

		<section id="event-dispatch">
<h3 title="Event dispatch">6.1. ~eventの配送-法</h3>

<p class="note">注記：
~WAnim~API `WEB-ANIMATIONS$r を利用して~animationが［
~seekされる／逆再生されている
］可能性を織り込むため、
この節の記述は，`~level 1$ による~event配送-法より一般的である。
◎
Note, this is a more general description of event dispatch than that of CSS Animations Level 1 [CSS3-ANIMATIONS] since it must account for the possibility of animations being seeked or reversed using the Web Animations API [WEB-ANIMATIONS].
</p>

<p>
~CSS~animation~event用の`~target$は、
当の~animationを`所有している要素$になる。
`所有している要素$は無い場合、
配送される~CSS~animation~eventも無い
（それでも、
~WAnimに定義される`~animation再生~event$は，
対応している `CSSAnimation$I ~objに向けて配送されるが）。
◎
The target for a CSS animation event is the animation’s owning element. If there is no owning element, no CSS animation events are dispatched (although the animation playback events defined in Web Animations are still dispatched at the corresponding CSSAnimation object).
</p>

<p>
どの~eventを配送するか決定する目的においては、
~WAnim~modelにて定義される
`各種 相＠~WANIM#animation-effect-phases-and-states$が利用される。
相は，`~animation効果$に対し定義されるが、
~eventを配送する目的においては， `~CSS~animation^i はそれに`結付けられた効果$と同じ相にあると見なされる。
例えば，所与の `~CSS~animation^i は、
それに`結付けられた効果$は`事前~相$iにあるならば，`事前~相$iにあるとする。
◎
For the purpose of determining which events to dispatch, the phases defined in the Web Animations model are used. These definitions apply to an animation effect, however, for the purpose of dispatching events, we consider a CSS Animation to have the same phase as its associated effect. For example, a CSS Animation is in the before phase if its associated effect is in the before phase.
</p>

<p>
`結付けられた効果$が無い `~CSS~animation^i の相は、
その`現-時刻$に応じて［
`未解決$ならば`遊休~相$i ／
0 未満ならば`事前~相$i ／
~ELSE_ `事後~相$i
］にあるものと見なされる。
◎
A CSS Animation that does not have an associated effect is considered to be in the idle phase if its current time is unresolved, in the before phase if its current time is less than zero, and in the after phase otherwise.
</p>

<p>
同様に，以下における `~CSS~animation^i の［
`開始-遅延$,
`作動~所要時間$,
`現在の反復~index$,
`反復~始端$,
`反復~所要時間$
］は、
当の~animationに`結付けられた効果$の各種~propを指すものと解するベキである。
◎
Similarly, subsequent references to the start delay, active duration, current iteration, iteration start, and iteration duration of a CSS animation should be understood to refer to the corresponding properties of the animation’s associated effect.
</p>

<p>
各~eventの `elapsedTime$m（`経過d時間$）を計算する際には、
次の定義が利用される：
◎
For calculating the elapsedTime of each event, the following definitions are used:
</p>

<ul>
	<li>
`区間~始端@
~EQ `max^op( `min^op( ~MINUS `開始-遅延$, `作動~所要時間$ ), 0)
◎
interval start = max(min(-start delay, active duration), 0)
</li>
	<li>
`区間~終端@
~EQ `max^op( `min^op( `結付けられた効果の終端$ ~MINUS `開始-遅延$, `作動~所要時間$ ), 0)
◎
interval end = max(min(associated effect end - start delay, active duration), 0)
</li>
</ul>

<p>
新たな`~animation~frame$が確立される各回にて配送する~event【, およびその`経過d時間$】は、
当の~animationの［
`処理待ち再生-~task$, `処理待ち静止-~task$
］は`どちらも^em ε （無い）ならば，
当の~frameを［
確立する前, 確立した後
］における~animationの相を次に従って比較することにより決定される：
◎
Each time a new animation frame is established and the animation does not have a pending play task or pending pause task, the events to dispatch are determined by comparing the animation’s phase before and after establishing the new animation frame as follows:
</p>

<div>
<table><thead>
<tr><td><td><th>確立-後
<tr><td><td><th>事前~相
<th>作動~相
<th>事後~相
<th>遊休~相
<tbody>

<tr><th rowspan="4">確立-前
<th>事前~相
<td>
<td>Ss
<td>Ss, Se
<td>C

<tr><th>作動~相
<td>Es
<td>I
<td>Ee
<td>C

<tr><th>事後~相
<td>Se, Es
<td>Se
<td>
<td>

<tr><th>遊休~相
<td>
<td>Ss
<td>Ss, Se
<td>
</table>

<p id="multiple-events-note">
上の表tの各欄に挙げられた記号は、
下の表tに示す対応する~eventが，挙げられた順に間を置かずに配送されることを表す
（空欄は、配送される~eventは無いことを表す）。
</p>

<table>
<caption>
上の表tの各欄に現れる記号の意味
</caption>
<thead>
<tr><th>記号
<th>配送される~event
<th>`経過d時間@
<tbody>

<tr><td>Ss
<td>`animationstart$et
<td>`区間~始端$

<tr><td>Se
<td>`animationstart$et
<td>`区間~終端$

<tr><td>Es
<td>`animationend$et
<td>`区間~始端$

<tr><td>Ee
<td>`animationend$et
<td>`区間~終端$

<tr><td>C
<td>`animationcancel$et
<td>（下を見よ）

<tr><td>I
<td>`animationiteration$et
<td>（下を見よ）
</table>

◎
Change 	Events dispatched｜Elapsed time (ms)
idle or before → active｜animationstart｜interval start
idle or before → after *｜animationstart｜interval start
〃｜animationend｜interval end
active → before｜animationend｜interval start
active → active and the current iteration of the animation’s associated effect has changed since the previous animation frame｜animationiteration｜(See below) †
active → after｜animationend｜interval end
after → active｜animationstart｜interval end
after → before *｜animationstart｜interval end
〃｜animationend｜interval start
not idle and not after → idle｜animationcancel｜The active time of the animation at the moment it was cancelled calculated using a fill mode of both.
◎
* Where multiple events are listed for a state change, all events are dispatched in the order listed and in immediate succession.
</div>

<ul>
	<li>
C に対応する~eventの経過d時間は、
取消された~momentにおける~animationの`作動~時刻$として与えられ，
`延伸~mode$に `両方^i
【, および確立-前の相】
を利用する下で計算される。
◎
↑</li>
	<li>
<p id="animation-iteration-elapsed-time">
I に対応する~eventは、
~animationに`結付けられた効果$の`現在の反復~index$が前回の`~animation~frame$から変化した場合に限り配送される。
その経過d時間は、
次に従って定義される：
◎
↑
◎
† The elapsed time for an animationiteration event is defined as follows:
</p>
		<ol>
			<li>
%前回の現-反復 ~LET 確立-前の~animation~frameにおける`現在の反復~index$
◎
Let previous current iteration be the current iteration from the previous animation frame.
</li>
			<li>
%反復~境界 ~LET 確立-後の~animation~frameにおける`現在の反復~index$
◎
↓</li>
			<li>
~IF［
%前回の現-反復 ~GT %反復~境界
］
⇒
%反復~境界 ~INCBY 1
◎
If previous current iteration is greater than current iteration, let iteration boundary be current iteration + 1, otherwise let it be current iteration.
</li>
			<li>
~RET ( %反復~境界 ~MINUS `反復~始端$ ) ~MUL `反復~所要時間$
◎
The elapsed time is the result of evaluating (iteration boundary - iteration start) × iteration duration).
</li>
		</ol>
	</li>
</ul>

<p>
上に定義される`経過d時間$は~milli秒数で表出されるので、
`AnimationEvent$I の `elapsedTime$m ~memberにアテガうときは，
その前に 1000 で除算して秒単位の値を生産するモノトスル。
◎
Since the elapsed time defined in the table and procedure above is expressed in milliseconds, it must be divided by 1,000 to produce a value in seconds before being assigned to the elapsedTime member of the AnimationEvent.
</p>

		</section>
	</section>
	<section id="interface-dom">
<h2 title="DOM Interfaces">7. ~DOM~interface</h2>

		<section id="the-CSSAnimation-interface">
<h3 title="The CSSAnimation interface">7.1. `CSSAnimation^I ~interface</h3>

<pre class="idl">
[`Exposed$=Window]
interface `CSSAnimation@I : `Animation$I {
  readonly attribute `CSSOMString$ `animationName$m;
};
</pre>

<dl class="idl-def">
	<dt>
`animationName@m
◎
animationName, of type CSSOMString, readonly
</dt>
	<dd>
~animationが作成された時点で，合致している［
`結付けられた効果$を定義する `keyframes$at 規則
］を見出すために利用された~keyを返す。
これは、
コレを生成させた `animation-name$p ~propの値【を成すいずれかの名前】になる。
◎
The key used to find matching keyframes rules that define the associated effect at the point when the animation was created. This is the value of the animation-name property that caused this object to be generated.
</dd>
</dl>

		</section>
		<section id="requirements-on-pending-style-changes">
<h3 title="Requirements on pending style changes">7.2. 処理待ち~style変化に対する要件</h3>

<div class="p">
<p>
様々な演算が要素~上の~propの`算出d値$に影響し得る。
~UAは、
最適化として，必要yあるまで これらの値を算出し直すのを先送りしてもヨイ。
しかしながら，次に挙げる演算は、［
算出d値に対する処理待ち変化を全部的に処理したとき
］と整合な結果を生産するモノトスル：
</p>

<ul>
	<li>
この仕様が定義する~APIに含まれる すべての演算
</li>
	<li>
~WAnim `WEB-ANIMATIONS$r に定義される演算のうち，この仕様が定義する［
~obj／~animation状態
］を返し得るもの
</li>
</ul>

◎
Various operations may affect the computed values of properties on elements. User agents may, as an optimization, defer recomputing these values until it becomes necessary. However, all operations included in programming interface defined in this specification, as well as those operations defined in Web Animations [WEB-ANIMATIONS] that may return objects or animation state defined by this specification, must produce a result consistent with having fully processed any such pending changes to computed values.
</div>

<div class="note">
<p>注記：
例えば次の~code片のように，要素 %elem に初期~時に指定された~styleが更新されたとき、
~UAは，%elem の `animation$p ~propの算出d値を計算し直すのを先送りしてもヨイ。
◎
As an example, in the following code fragment, when the specified style of elem is initially updated, a user agent may defer recalculating the computed value of the animation property.
</p>

<p>
しかしながら， %elem 上で~callされる `getAnimations()$m ~methodは、
~WAnimにより指定され，この仕様が定義する `CSSAnimation$I ~objを返し得る。
よって，この節の要件から、
~UAは
— 結果を返す前に —
%elem の `animation$p ~propの更新された値を計算してから，
要請された `CSSAnimation$I ~objを作成する必要がある。
◎
However, the getAnimations() method called on elem is specified by Web Animations and can return CSSAnimation objects as defined in this specification. Hence, as result of the requirements in this section, the user agent must calculate the updated value of elem’s animation property and create the requested CSSAnimation object before returning its result.
</p>

<pre class="example lang-js">
%elem.style.animation = 'fadeOut 1s';
%elem.getAnimations()[0].pause();
</pre>

<p>
同様に， `playState$m を読取った結果は、
処理待ち~style変化に依存し得る。
◎
Similarly, reading playState may depend on pending style changes.
</p>

<pre class="example lang-js">
%elem.style.animation = 'fadeOut 1s paused';
const %anim = %elem.getAnimations()[0];
%elem.style.animationPlayState = 'running';
console.log(%anim.playState); /* <span class="comment">
`running^l （ `稼働中$i ）になるべき。
◎
Should be 'running'.
</span> */
</pre>
</div>

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

<p>
この仕様に対し報告された~privacyの懸念は、
無い。
◎
No privacy concerns have been reported on this specification.
</p>

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

<p>
この仕様に対し報告された~securityの懸念は、
無い。
◎
No security concerns have been reported on this specification.
</p>

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

<dl>
	<dt id="changes-recent">
`2023年 3月 2日 作業草案＠~TR/2023/WD-css-animations-2-20230302/$
からの変更点
◎
10.1. Recent Changes
◎
Changes since the 2 March 2023 Working Draft include:
</dt>
	<dd>
`animation-duration$p の`初期~値$として `auto^v を追加した。
（ `6530$issue ）
◎
Added auto as the initial value of animation-duration. (Issue 6530)
</dd>
	<dd>
`§ ~keyframeの処理-法＠#keyframe-processing$を書き直した
⇒＃
`~cascade$を再利用するよう／
百分率でない~keyframe~offsetを取扱うよう／
範囲 [0,1] の外側にある~offsetを伴う~keyframeを取扱うよう／
`animation-composition$p の値を既定の組成法として利用するよう
◎
Rewrote § 3.2 Processing Keyframes to re-use the cascade, to handle non-percentage keyframe offsets, to handle keyframes with offsets outside the [0,1] range, and to use the value of animation-composition as the default composite.
</dd>
	<dd>
`display$p が `none^v をとるときに~animationを取消す事例を抑制した。
（ `6429$issue ）
◎
Reduced the cases where display: none cancel an animation. (Issue 6429)
</dd>
	<dd>
`CSS-VALUES-4$r `§ 協調している~list値をとる~prop群＠~CSSVAL#linked-properties$
へ相互~linkした
— 各種 `animation-*^p ~propがどう相互作用するか定義するため。
◎
Cross-linked to CSS Values 4 § A Coordinating List-Valued Properties to define how the various animation-* properties interact.
</dd>
	<dd>
各種 `animation-*^p ~propのうち， `animation-timeline$p が最初に適用されることを明確化した。
◎
Clarified that among the animation properties, animation-timeline is applied first.
</dd>

	<dt id="changes-level-1">
`~level 1$ からの変更点
◎
10.2. Changes since CSS Animations, Level 1
</dt>
	<dd>
CSS Animations と~WAnimの相互作用を定義した。
［
`所有している要素$, ~animationの`組成-順序$
］の概念を導入した。
◎
The interaction between CSS Animations and Web Animations is defined, and the concepts of the owning element and animation composite order are introduced.
</dd>
	<dd>
~keyframe~objの生成を詳細に述べた。
◎
Generation of keyframe objects is described in detail.
</dd>
	<dd>
`animation-composition$p ~propを導入した
— それは、
複数の~animationが同じ~prop同時に影響するときに利用される組成-演算を定義する。
◎
The animation-composition property is introduced, which defines the composite operation used when multiple animations affect the same property simultaneously.
</dd>
	<dd>
`animation-timeline$p ~propを導入した
— それは、
~animationと伴に利用される時列線を定義する。
◎
The animation-timeline property is introduced, which defines the timeline used with the animation.
</dd>
	<dd>
上述した新たな~propを織り込むよう，
`animation$p 略式~propを更新した。
◎
The animation shorthand property is updated to account for these new properties.
</dd>
	<dd>
~animation~eventの配送-について述べた。
◎
Dispatch of animation events is described.
</dd>
	<dd>
`CSSAnimation$I ~interfaceを追加した。
◎
The CSSAnimation interface is added.
</dd>
	<dd>
処理待ち~style変化に対する要件を述べた。
◎
Requirements on pending style changes are described.
</dd>
</dl>

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