web-animations-api-ja.html

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

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

<style>
.informative {
	padding: 0.5em;
	background: var(--note-bg-color);
	border: thin solid var(--pale-color);
}
</style>

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

<script>
Util.ready = function(){
	const source_data = {
		toc_main: 'programming-interface',
		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 ctx_ifc = '';
	let ctx_ifc1 = ''; // local

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

	function create_html(match, key, indicator, klass){
if(!indicator) {//%
	match = match.slice(1);
	const n = match.indexOf('\/');
	if(n <= 0) {
		return `<var>${match}</var>`;
	}
	return (
`<var>${match.slice(0, n)}</var><sub>${match.slice(n+1)}</sub>`
	); // 添え字付き
}

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;`;
	break;
case 'pe':
	text = `::${key}`;
	break;

case 'I': // set local context ( and context if @ )
	ctx_ifc1 = key.toLowerCase();
	if( indicator === '@'){
		ctx_ifc = ctx_ifc1;
	}
//	href = `#${ctx_ifc1}`;
	break;
case 'II': // only set local context
	ctx_ifc1 = key.toLowerCase();
	if(indicator == '^'){
		return '';
	}
	klass = 'I';
	break;
case 'I0': // set context
	ctx_ifc = key.toLowerCase();
	klass = 'I';
	break;
case 'm':
case 'm1':
case 'm0':
	const n = text.indexOf('(');
	if(n > 0){
		key = text.slice(0, n);
		text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
	}
	switch(klass){
	case 'm':
		href = `#dom-${ctx_ifc}-${key.toLowerCase()}`;
		break;
	case 'm1':
		href = `#dom-${ctx_ifc1}-${key.toLowerCase()}`;
		break;
	case 'm0': // ctor
		href = `#dom-${key.toLowerCase()}-${key.toLowerCase()}`;
		text = `new ${text}`;
		break;
	}
//	klass = 'm';
	break;
case 'mc':
	href = `#dom-${key.toLowerCase()}-${key.toLowerCase()}`;
	text = 'constructor';
	break;
case 'l':
case 'l1':
	text = `"<code class="literal">${text}</code>"`;
	switch(klass) {
	case 'l':
		href = `#dom-${ctx_ifc}-${key.toLowerCase()}`;
		break;
	case 'l1':
		href = `#dom-${ctx_ifc1}-${key.toLowerCase()}`;
		break;
	}
	break;
case 'sl':
	text = `[[${key}]]`;
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
case 'issue':
	text = `課題 #${key}`;
	href = `~CSSissue/${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

trans_update:2025-02-01
	source_checked:→web-animations-ja
original_url:https://drafts.csswg.org/web-animations-1/
	abbr_url:WANIMapi
spec_status:ED
page_state_key:WANIM
	ref_id_prefix:biblio-
	ref_id_lowercase:true
site_nav:css-anim,svg,css
	conformance:css
	copyright:2018,use
	trans_1st_pub:2018-05-02


●●class_map
r:ref
p:property
pe:pseudo
t:type
v:value
et:event-type
e:element
a:attr
E:error
sl:js-slot
jv:js-value
jc:js-type
jA:abstract
op:op
u:unit
css:css

●●tag_map
p:code
pe:code
t:var
css:code
et:code
E:code
I:code
II:code
I0:code
C:code
m:code
m0:code
m1:code
v:code
u:code
e:code
a:code
jA:span
jc:span
sl:span
i:i
jv:code
op:span
c:code
em:em
V:var

●●original_id_map

●●mdn_urls
animation:API/Animation
	animatable:API/Animatable
animationeffect:API/AnimationEffect
animationplaybackevent:API/AnimationPlaybackEvent
animationtimeline:API/AnimationTimeline
dictdef-effecttiming:API/EffectTiming
documenttimeline:API/DocumentTimeline
keyframeeffect:API/KeyframeEffect
	dictdef-animationplaybackeventinit:API/AnimationPlaybackEventInit
	dictdef-basecomputedkeyframe:API/BaseComputedKeyframe
	dictdef-basekeyframe:API/BaseKeyframe
	dictdef-basepropertyindexedkeyframe:API/BasePropertyIndexedKeyframe
	dictdef-computedeffecttiming:API/ComputedEffectTiming
	dictdef-computedtimingproperties:API/ComputedTimingProperties
	dictdef-documenttimelineoptions:API/DocumentTimelineOptions
	dictdef-getanimationsoptions:API/GetAnimationsOptions
	dictdef-keyframeanimationoptions:API/KeyframeAnimationOptions
	dictdef-keyframeeffectoptions:API/KeyframeEffectOptions
	dictdef-optionaleffecttiming:API/OptionalEffectTiming
	enumdef-animationplaystate:API/AnimationPlayState
	enumdef-animationreplacestate:API/AnimationReplaceState
	enumdef-compositeoperation:API/CompositeOperation
	enumdef-compositeoperationauto:API/CompositeOperationOrAuto
	enumdef-fillmode:API/FillMode
	enumdef-playbackdirection:API/PlaybackDirection

●●link_map

	●JS
	jsI.iterator:~ES6#sec-well-known-symbols
sl.DefineOwnProperty:~ES6#sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc
sl.Get:~ES6#sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver

jA.Type:~ES6#sec-ecmascript-data-types-and-values
jA.EnumerableOwnNames:~ES6#sec-enumerableownnames
jA.GetIterator:~ES6#sec-getiterator
jA.GetMethod:~ES6#sec-getmethod
jA.IteratorStep:~ES6#sec-iteratorstep
jA.IteratorValue:~ES6#sec-iteratorvalue

	●IDL

Exposed:~WEBIDLjs#Exposed
EnforceRange:~WEBIDLjs#EnforceRange
CEReactions:~HEcustom#cereactions

undefined:~WEBIDL#idl-undefined
boolean:~WEBIDL#idl-boolean
double:~WEBIDL#idl-double
unrestricted double:~WEBIDL#idl-unrestricted-double
DOMString:~WEBIDL#idl-DOMString
object:~WEBIDL#idl-object
sequence:~WEBIDL#idl-sequence
Promise:~WEBIDL#idl-promise
CSSOMString:~CSSOM1#cssomstring

E.TypeError:~WEBIDL#exceptiondef-typeerror
E.InvalidStateError:~WEBIDL#invalidstateerror
E.SyntaxError:~WEBIDL#syntaxerror
E.NoModificationAllowedError:~WEBIDL#nomodificationallowederror
	I.DOMException:~WEBIDL#idl-DOMException

I.AnimationEffect:#animationeffect
I.EffectTiming:#dictdef-effecttiming
I.OptionalEffectTiming:#dictdef-optionaleffecttiming
I.ComputedEffectTiming:#dictdef-computedeffecttiming


I.Animatable:#animatable
I.Animation:#animation
I.AnimationPlayState:#enumdef-animationplaystate
I.AnimationReplaceState:#enumdef-animationreplacestate
I.AnimationPlaybackEvent:#animationplaybackevent
I.AnimationPlaybackEventInit:#dictdef-animationplaybackeventinit
I.AnimationTimeline:#animationtimeline
I.BaseComputedKeyframe:#dictdef-basecomputedkeyframe
I.BaseKeyframe:#dictdef-basekeyframe
I.BasePropertyIndexedKeyframe:#dictdef-basepropertyindexedkeyframe
I.CompositeOperation:#enumdef-compositeoperation
I.CompositeOperationOrAuto:#enumdef-compositeoperationauto
I.ComputedTimingProperties:#dictdef-computedtimingproperties

I.CSSAnimation:~CSSANIM2#cssanimation
I.Document:~HTMLdom#document
I.DocumentOrShadowRoot:~HTMLdom#documentorshadowroot
	~DOM4#documentorshadowroot？
I.DocumentTimeline:#documenttimeline
I.DocumentTimelineOptions:#dictdef-documenttimelineoptions
I.FillMode:#enumdef-fillmode

I.KeyframeAnimationOptions:#dictdef-keyframeanimationoptions
I.KeyframeEffect:#keyframeeffect
I.KeyframeEffectOptions:#dictdef-keyframeeffectoptions
I.PlaybackDirection:#enumdef-playbackdirection
I.GetAnimationsOptions:#dictdef-getanimationsoptions

I.DOMHighResTimeStamp:~HRTIME#dom-domhighrestimestamp
I.Element:~DOM4#element
I.Event:~DOM4#event
I.EventHandler:~WAPI#eventhandler
I.EventInit:~DOM4#dictdef-eventinit
I.EventTarget:~DOM4#eventtarget

I.Window:~WINDOW#window


	■AnimationTimeline
	currentTime:#dom-animationtimeline-currenttime

	■DocumentTimelineOptions
	originTime:#dom-documenttimelineoptions-origintime

	■DocumentTimeline
	Constructor:#dom-documenttimeline-documenttimeline

	■Animation
	Constructor:#dom-animation-animation
	id:#dom-animation-id
	effect:#dom-animation-effect
	timeline:#dom-animation-timeline
	startTime:#dom-animation-starttime
	currentTime:#dom-animation-currenttime
	playbackRate:#dom-animation-playbackrate
	playState:#dom-animation-playstate
	replaceState:#dom-animation-replacestate
	pending:#dom-animation-pending
	ready:#dom-animation-ready
	finished:#dom-animation-finished
	oncancel:#dom-animation-oncancel
	onfinish:#dom-animation-onfinish
	onremove:#dom-animation-onremove
	cancel:#dom-animation-cancel
	finish:#dom-animation-finish
	play:#dom-animation-play
	pause:#dom-animation-pause
	updatePlaybackRate:#dom-animation-updateplaybackrate
	reverse:#dom-animation-reverse
	persist:#dom-animation-persist
	commitStyles:#dom-animation-commitstyles


	■AnimationPlayState
	idle:#dom-animationplaystate-idle
	running:#dom-animationplaystate-running
	paused:#dom-animationplaystate-paused
	finished:#dom-animationplaystate-finished

	■AnimationReplaceState
	active:#dom-animationreplacestate-active
	removed:#dom-animationreplacestate-removed
	persisted:#dom-animationreplacestate-persisted

	■AnimationEffect
	getTiming:#dom-animationeffect-gettiming
	getComputedTiming:#dom-animationeffect-getcomputedtiming
	updateTiming:#dom-animationeffect-updatetiming

	■EffectTiming
	delay:dom-optionaleffecttiming-delay
	endDelay:dom-optionaleffecttiming-enddelay
	fill:dom-optionaleffecttiming-fill
	iterationStart:dom-optionaleffecttiming-iterationstart
	iterations:dom-optionaleffecttiming-iterations
	duration:dom-optionaleffecttiming-duration
	direction:dom-optionaleffecttiming-direction
	easing:dom-optionaleffecttiming-easing

	■OptionalEffectTiming
	delay:#dom-optionaleffecttiming-delay
	endDelay:#dom-optionaleffecttiming-enddelay
	fill:#dom-optionaleffecttiming-fill
	iterationStart:#dom-optionaleffecttiming-iterationstart
	iterations:#dom-optionaleffecttiming-iterations
	duration:#dom-optionaleffecttiming-duration
	direction:#dom-optionaleffecttiming-direction
	easing:#dom-optionaleffecttiming-easing

	■FillMode
	none:#dom-fillmode-none
	forwards:#dom-fillmode-forwards
	backwards:#dom-fillmode-backwards
	both:#dom-fillmode-both
	auto:#dom-fillmode-auto

	■PlaybackDirection
	normal:#dom-playbackdirection-normal
	reverse:#dom-playbackdirection-reverse
	alternate:#dom-playbackdirection-alternate
	alternate-reverse:#dom-playbackdirection-alternate-reverse

	■ComputedEffectTiming
	endTime:#dom-computedeffecttiming-endtime
	activeDuration:#dom-computedeffecttiming-activeduration
	localTime:#dom-computedeffecttiming-localtime
	progress:#dom-computedeffecttiming-progress
	currentIteration:#dom-computedeffecttiming-currentiteration

	■KeyframeEffect
	Constructor:#dom-keyframeeffect-keyframeeffect
	＊Constructor:#dom-keyframeeffect-keyframeeffect-source
	target:#dom-keyframeeffect-target
	pseudoElement:#dom-keyframeeffect-pseudoelement
	composite:#dom-keyframeeffect-composite
	getKeyframes:#dom-keyframeeffect-getkeyframes
	setKeyframes:#dom-keyframeeffect-setkeyframes

	■ComputedKeyframe
	offset:#_dom-computedkeyframe-offset
	computedOffset:#_dom-computedkeyframe-computedoffset
	easing:#_dom-computedkeyframe-easing
	composite:#_dom-computedkeyframe-composite

	■BaseComputedKeyframe
	offset:#dom-basecomputedkeyframe-offset
	computedOffset:#dom-basecomputedkeyframe-computedoffset
	easing:#dom-basecomputedkeyframe-easing
	composite:#dom-basecomputedkeyframe-composite

	■BasePropertyIndexedKeyframe
	offset:#dom-basepropertyindexedkeyframe-offset
	easing:#dom-basepropertyindexedkeyframe-easing
	composite:#dom-basepropertyindexedkeyframe-composite

	■BaseKeyframe
	offset:#dom-basekeyframe-offset
	easing:#dom-basekeyframe-easing
	composite:#dom-basekeyframe-composite

	■KeyframeEffectOptions
	composite:#dom-keyframeeffectoptions-composite
	pseudoElement:#dom-keyframeeffectoptions-pseudoelement

	■CompositeOperation
	replace:#dom-compositeoperation-replace
	add:#dom-compositeoperation-add
	accumulate:#dom-compositeoperation-accumulate

	■CompositeOperationOrAuto
l.~autoCO:#dom-compositeoperationorauto-auto
	auto:#dom-compositeoperationorauto-auto

	■Animatable
	animate:#dom-animatable-animate
	getAnimations:#dom-animatable-getanimations


	■KeyframeAnimationOptions
	id:#dom-keyframeanimationoptions-id
	timeline:#dom-keyframeanimationoptions-timeline

	■Document
	m.timeline:#dom-document-timeline

	■DocumentOrShadowRoot
	m.getAnimations:#dom-documentorshadowroot-getanimations

	■AnimationPlaybackEvent
	Constructor:#dom-animationplaybackevent-animationplaybackevent
	currentTime:#dom-animationplaybackevent-currenttime
	timelineTime:#dom-animationplaybackevent-timelinetime

	■AnimationPlaybackEventInit
	currentTime:#dom-animationplaybackeventinit-currenttime
	timelineTime:#dom-animationplaybackeventinit-timelinetime


m.requestAnimationFrame:~HTMLGAPI#dom-animationframeprovider-requestanimationframe

	●
	m.Element.animate:#extensions-to-the-element-interface

	%effect:#dom-animation-animation-effect-timeline-effect
	%timeline:#dom-animation-animation-effect-timeline-timeline
	%playbackRate:#dom-animation-updateplaybackrate-playbackrate-playbackrate
	%options:#dom-documenttimeline-documenttimeline-options-options
	%target:#dom-keyframeeffect-keyframeeffect-target-keyframes-options-target
	%keyframes:#dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes
	%options:#dom-keyframeeffect-keyframeeffect-target-keyframes-options-options
	%source:#dom-keyframeeffect-constructor-source-source
	%keyframes:#dom-animatable-animate-keyframes-options-keyframes
	%options:#dom-animatable-animate-keyframes-options-options
	%timing:#dom-animationeffect-updatetiming-timing-timing

	●code CSS 他
et.cancel:~WANIM#cancel-event
et.remove:~WANIM#remove-event
et.finish:~WANIM#finish-event
et.transitionend:~TRANSITION#transitionend

p.display:~CSSDISP#propdef-display
p.float:~CSS2J#propdef-float
p.offset:~MOTION1#propdef-offset

t.custom-property-name:~CSSVAR#typedef-custom-property-name
t.easing-function:~CSSEASING#typedef-easing-function
t.pseudo-element-selector:~SELECTORS4#typedef-pseudo-element-selector


r.CSS-EASING-1:~WANIM#biblio-css-easing-1
r.CSSOM:~WANIM#biblio-cssom
r.DOM:~WANIM#biblio-dom
r.WEBIDL:~WANIM#biblio-webidl
r.css-pseudo-4:~WANIM#biblio-css-pseudo-4
r.CSS-STYLE-ATTR:~WANIM#biblio-css-style-attr
r.HTML:~WANIM#biblio-html
r.SELECTORS-4:~WANIM#biblio-selectors-4

	●用語（ API
~animation効果の計時~propを更新する:#update-the-timing-properties-of-an-animation-effect
~animation~prop名から~IDL属性~名を得る:#animation-property-name-to-idl-attribute-name
~IDL属性~名から~animation~prop名を得る:#idl-attribute-name-to-animation-property-name
~keyframes引数を処理する:#process-a-keyframes-argument
完了~recordを検査する:#check-the-completion-record
~keyframeに類する~objを処理する:#process-a-keyframe-like-object

算出d~styleを~commitする:#commit-computed-styles
疑似要素~名を構文解析する:#dom-keyframeeffect-pseudo-element-parsing

	●用語
~WAnim~model:~WANIM#web-animations-model
~WAnim~API:~WANIM#web-animations-api

関連な~animation群:~WANIM#relevant-animations
下位tree用の関連な~animation群:~WANIM#relevant-animations-for-a-subtree

組成-演算~型:~WANIM#composite-operation
組成d値:~WANIM#composited-value

累積-型:~WANIM#composite-operation-accumulate
置換-型:~WANIM#composite-operation-replace
加算-型:~WANIM#composite-operation-add

	加算:~WANIM#animation-addition
加算-:~WANIM#animation-addition
	累積:~WANIM#animation-accumulation
累積-:~WANIM#animation-accumulation

作動~所要時間:~WANIM#active-duration
作動~区間:~WANIM#active-interval

~animation:~WANIM#concept-animation
i.~CSS~animation:~WANIM#_animation-class-css-animation

~animation効果:~WANIM#animation-effect
~animation再生~event:~WANIM#animation-playback-events
結付けた~animation:~WANIM#animation-effect-associated-animation

既定の文書~時列線:~WANIM#document-default-document-timeline
文書~時列線:~WANIM#document-timeline
時列線:~WANIM#timeline
作動中:~WANIM#active-timeline
tL.現-時刻:~WANIM#timeline-current-time

An.時列線:~WANIM#_animation-timeline
	An.作動中:~WANIM#_animation-timeline-is-active
	時列線~時刻:~WANIM#_animation-timeline-time

欠落~keyframe~offsetを算出する:~WANIM#compute-missing-keyframe-offsets
算出d~keyframe~offset:~WANIM#computed-keyframe-offsets


現在の完遂d~promise:~WANIM#current-finished-promise
現在の準備済み~promise:~WANIM#current-ready-promise
新たな処理待ち~promise:~WANIM#_new-pending-promise


反復~index:~WANIM#current-iteration-index
現在の反復~index:~WANIM#current-iteration-index

時刻~値:~WANIM#time-value
現-時刻:~WANIM#animation-current-time
開始-遅延:~WANIM#start-delay
終止-遅延:~WANIM#end-delay
開始-時刻:~WANIM#animation-start-time
終止-時刻:~WANIM#animation-effect-end-time
作動-区間:~WANIM#active-interval

効果~stack:~WANIM#effect-stack
効果~値:~WANIM#effect-value

延伸~mode:~WANIM#fill-mode
i.ナシ:~WANIM#fill-mode-none
i.前方:~WANIM#fill-mode-forwards
i.後方:~WANIM#fill-mode-backwards
i.両方:~WANIM#fill-mode-both

再生-状態:~WANIM#animation-play-state
置換-状態:~WANIM#replace-state


i.完遂d:~WANIM#play-state-finished
i.遊休中:~WANIM#play-state-idle
i.静止中:~WANIM#play-state-paused
i.稼働中:~WANIM#play-state-running

i.作動中:~WANIM#active-replace-state
i.除去-済み:~WANIM#removed-replace-state
i.持続化:~WANIM#persisted-replace-state

反復~回数:~WANIM#iteration-count
反復~所要時間:~WANIM#iteration-duration
反復~区間:~WANIM#iteration-interval
反復~始端:~WANIM#iteration-start
反復~進捗:~WANIM#iteration-progress

~keyframe効果:~WANIM#keyframe-effect
~keyframe~offset:~WANIM#keyframe-offset
~keyframeに特有な組成-演算~型:~WANIM#keyframe-specific-composite-operation
~keyframe:~WANIM#keyframe

局所~時刻:~WANIM#local-time
~offsetにより~looseに~sortされ:~WANIM#loosely-sorted-by-offset


起点~時刻:~WANIM#origin-time

時列線を設定する:~WANIM#animation-set-the-timeline-of-an-animation
開始-時刻を設定する:~WANIM#set-the-start-time
現-時刻を設定する:~WANIM#animation-set-the-current-time
~animationを取消す:~WANIM#cancel-an-animation
~animationを完遂する:~WANIM#finish-an-animation
~animationを再生する:~WANIM#play-an-animation
~animationを静止する:~WANIM#pause-an-animation
~animationを逆転する:~WANIM#reverse-an-animation

処理待ち静止-~task:~WANIM#pending-pause-task
処理待ち再生-~task:~WANIM#pending-play-task
再生~rateを継目無く更新する:~WANIM#seamlessly-update-the-playback-rate
再生~rateを設定する:~WANIM#set-the-playback-rate
~seek:~WANIM#seek

再生~方向:~WANIM#playback-direction
再生~rate:~WANIM#playback-rate

未解決:~WANIM#unresolved
	解決-済み:~WANIM#unresolved

結付けられた効果:~WANIM#animation-associated-effect
結付けられた効果の終端:~WANIM#associated-effect-end
結付けられる効果を設定する:~WANIM#animation-set-the-associated-effect-of-an-animation

効果~target:~WANIM#keyframe-effect-effect-target
~target要素:~WANIM#effect-target-target-element
~target疑似-選択子:~WANIM#effect-target-target-pseudo-selector

~target~prop:~WANIM#target-property
下層~値:~WANIM#underlying-value
算出d~keyframe~list:~WANIM#computed-keyframes

~animationを更新して~eventを送信する:~WANIM#update-animations-and-send-events

§ ~keyframes引数の処理-法:#processing-a-keyframes-argument
	＠#model-liveness
	＠~WANIM#setting-the-current-time-of-an-animation
§ 計時~model:~WANIM#timing-model
	＠~WANIM#replacing-animations
	~WANIM#calculating-the-result-of-an-effect-stack
	＠~WANIM#removing-replaced-animations
	＠~WANIM#fill-behavior

	§ 新たな~KeyframeEffect~objの作成-法:#creating-a-new-keyframeeffect-object
	§ 効果~stack:~WANIM#the-effect-stack

反復~組成-演算~型:~WANIM2#iteration-composite-operation

	●補完
属する文書:~WANIM#timeline-associated-with-a-document
組成-順序:~WANIM#animation-composite-order
時列線~現-時刻:~WANIM#_animation-timeline-time
	~keyframeに特有な~easing関数:~WANIM#keyframe-specific-easing-function


	●外部（CSS
~easing関数:~CSSEASING#easing-function

~style変化~event:~TRANSITION#style-change-event
変化-前~style:~TRANSITION#before-change-style
変化-後~style:~TRANSITION#after-change-style

~CSS~prop名から~IDL属性~名を得る:~CSSOM1#css-property-to-idl-attribute
~IDL属性~名から~CSS~prop名を得る:~CSSOM1#idl-attribute-to-css-property
~CSS値を直列化する:~CSSOM1#serialize-a-css-value
~CSS宣言~block:~CSSOM1#css-declaration-block
dB.宣言~群:~CSSOM1#cssstyledeclaration-declarations
dB.算出-済みか:~CSSOM1#cssstyledeclaration-computed-flag
dB.所有者~node:~CSSOM1#cssstyledeclaration-owner-node
~CSS宣言を設定する:~CSSOM1#set-a-css-declaration
~style属性を更新する:~CSSOM1#update-style-attribute-for

疑似要素:~SELECTORS4#pseudo-element
無効な選択子:~SELECTORS4#invalid-selector
出自の要素:~SELECTORS4#originating-element

則って構文解析-:~CSSSYN#css-parse-something-according-to-a-css-grammar
~style属性:~CSSSTYLEATTR#style-attribute

	●外部


集合:~INFRA#ordered-set
存在-:~INFRA#map-exists

~node文書:~DOM4#concept-node-document
~eventを構築する:~DOM4#constructing-events
子:~DOM4#concept-tree-child
属性~list:~DOM4#concept-element-attribute
	属性を有する:~DOM4#concept-element-attribute-has
接続されて:~DOM4#connected
	文書:~DOM4#concept-document
	~shadow根:~DOM4#concept-shadow-root
	コレ:document or shadow root


~realm:~ES6#sec-code-realms
現在の~realm:~ES6#sec-execution-contexts
完了~record:~ES6#sec-completion-record-specification-type
中途完了:~ES6#sec-completion-record-specification-type

~THROW:~WEBIDL#dfn-throw
投出され:~WEBIDL#dfn-throw
~nullable:~WEBIDL#dfn-nullable-type
~ES値から辞書~型に変換する:~WEBIDLjs#js-to-dictionary
~IDL値に変換する:~WEBIDLjs#dfn-convert-javascript-to-idl-value
	＠~WEBIDLjs#DOMString-to-js
	＠~WEBIDLjs#js-to-DOMString

具現化され:~HTMLrendering#being-rendered
結付けられた文書:~WINDOW#concept-document-window
enV.時刻~起点:~WAPI#concept-settings-object-time-origin
現在の大域~obj:~WAPI#current-global-object
~event~loop処理~model:~WAPI#event-loop-processing-model
関連な~realm:~WAPI#concept-relevant-realm
各~animation~frame~callbackを走らす:~HTMLGAPI#run-the-animation-frame-callbacks


●●
	他のリンク


●●words_table1
ES6:https://www.ecma-international.org/ecma-262/6.0/
WANIM2:https://drafts.csswg.org/web-animations-2/
MOTION1:motion-ja.html

autoCO:auto

●●words_table

	●時間
moment:::時点
seek:
未解決:unresolved::~
秒:seconds::~
今:now::~
起点:origin::~
開始-:start::~
終止-:end::~
区間:interval:::~
ナシ:none::なし
前方:forwards::~
後方:backwards::~
両方:both::~
milli-:::ミリ
	~milli-秒:milliseconds
延伸:fill:::~
	延伸する:-filling
	時点:at the time
	時刻に基づく:timed

	●変形
loose:
easing:
	~easingたち:easings
伸縮-:scale:::~
変形-:transform:::~

	●補間／演算
有限:finite::~
無限:infinite::~
無限大:infinity:: ∞ 
実数:number::~
実数-:real number::~
累積-:accumulate:::~

組成-:composite:::~
組成d:composited:::組成
組成:composition:::~
差分:delta::~
中間点:half-way:~

	計算し直す:recalculating

	●animate／再生／効果
遊休中:idle:::~
静止-:pause:::~
静止中:paused:::~
	静止-を解く:unpause
巻戻す:rewindする:::~
稼働中:running:::~
継目無く:seamlessに:::~
逆転-:reverse::~
逆方向:reverse direction::~
繰返しの:repeating::繰り返しの
再生-:play:::~
再生:playback:::~
	再生中の:in-flight
始まる:beginする:::~
始める:beginする:::~
	〜から:beginning
反転-:invert::~

相:phase:::~
作動:active::~::アクティブ
持続化:persisted:::~
rate::::レート
keyframe:
keyframes:
	%~keyframe:frame
	%対象~keyframe~list:processed keyframes
schedule::::スケジュール
交替-:alternate::~
進行-:proceed:~
	~~加減速／easing^en:easing
維持-:retain::~
際限なく:indefiniteに::~

	変化-後:after-change
	変化-前:before-change
	~animate可能:animatable
	~animate不可:not animatable
	完了-:run to completion

	●CSS／呈示／UI
疑似-:pseudo-::~
不透明度:opacity::~

	複数の~propからなる:multi-property

	●IDL／構造／型／操作
nullable:::null 可能
浮動小数点:floating-point:~
併合-:merge::~
出自の:originating::~
広義-:inclusive:~

	配列~形:array-form
	文書:doc
	要素でも, その子孫でも:not part of a  〜 subtree
	対応-:correspond
	対応関係:correspondence
	設定しておく:setup

	●一般処理／操作
commit:
	反復子:iter
伸縮-:scale::~
process::::プロセス
処理待ち:pending::~
中途完了:abrupt completion:::~
滑らか:smooth::~
欠落:missing:~
永遠:forever:~
書込む:writeする::書き込む

	のみ在る:not present
	~promise:Promise object
	~thread等:process or thread
	アテガわれ:assignment
	-／与えられていない:missing
	投出し直す:re-throw
	投出:raise
	し続ける:continues to
	%疑似要素~名:pseudoElement

	●構文
文:statement:~
	~escape法:escaping
	〜形:-form
式:expression::~
展開-:expand::~
	項:term

	^jc:Boolean
	^en:run-to-completion
	^en:partially open-ended
	~keyframe~map:property-indexed keyframe
	~keyframe~map:property-indexed
	~propの ( 名前 / 値 ):property-value
	~propの ( 名前 / 値~list ):property-valuelist


●仕様
	API:programming interface／application programming interface／の programming interface component
WAnim:Web Animations
ES:ECMAScript
	JS:ECMAScript
	-／手続-:procedure
	手続き:steps
非互換性:incompatibility:~
後継:subsequent:~
警告:warning:~
強調-:highlight:~
短絡-:shortcut:~
診断-:diagnose:~
	-:supply
拡げる:expandする::~
実用:usable:~

	見込みが高い:may〜likely
	まだ〜ない:yet to be
	必要はない:not necessary
	後継:subsequent
	一方で:However
	備える:measure
	ついでに:incidentally
	-:we
	-:instruction
	-:as-is
	:such that
	論の最中:under discussion
	〜の取扱い:〜-handling
	~support用の:supporting
	いてもよい:however, are permitted
	differences
	-:build up する:築き上げる
	指定されたとおりに:as specified に
	〜に応じて:based
	に~~正確に~~倣う:mirror
	合致する:conforms／:follow／:cannot be parsed using the
	どこかに加えられた:made to any part
	加えられた:made
	-:follows
	及ぼす:take
	併用:in combination with
	次により拡張される:following extensions are made to


●未分類
忠実性:fidelity:~
片:fragment::~
jump::::ジャンプ
	-:mark
fade::::フェード
audio:
生の:raw:~
音響:sound::~
変種:variant:~
差分:delta:~

	~~適用可能な:capable of
	示す:illustrate
	保つ:keep
	生じた:cause
	加えて:add して
	~~反映:occur／:happen
	類の:kind
	-:excess
	-:receiver
	-:unused
	-:refer
	~live性:liveness
	昇順:increasing order
	間隔〜~~決定:spaced
	-:successively
	加えられた:made
	成している:make up
	最新の:fully up-to-date
	長い:long
	-:way through
	割合分
	昇順:ascending order
	行:line
	点:point
	~NULL でない:non-null
	~LT:fewer
	閉区間 [0, 1]:between 0.0 and 1.0 inclusive
	次t~item:nextItem
	部分的な効果~stack:partialEffectStack

●指示語
現-:current::~
次t:next:次の

	部分的に:partially-
	一連の／:series
	前回の／:previous
	2 度にわたり／2 周:twice
	1 個~以下:at most one
	合間:_between_
	〜未満:less than
	〜以上の:greater than or equal to
	~GTE:greater than or equal
	~GTE:as many items as
	~GT:has more items than
	0 回から数える:beginning with zero for the first iteration
	3 個目の:middle
	離れた所でも:apart from
	他の:further
	より先に:prior to
	すぐ:shortly
	一括して:at once
	全体にかけて:across the whole span of
	あるいは:otherwise
	でなかったなら:otherwise
	かかる:take
	それらが〜~~同時に:whole set of changes 〜together 
	同時に:at the same time
	一方で:whilst
	以下の:following
	5 個目／による結果の／最後の:final
	直後:immediately after

●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">Web Animations</a>
の
<a href="~SPEC_URL#programming-interface">§ Programming interface</a>
を日本語に翻訳したものです。
</p>

</script>

</head><body>

<header>
	<hgroup>
<h1>Web Animations — Programming interface</h1>
	</hgroup>

<p class="trans-note">【
このページは、編集の都合により，
<a href="web-animations-ja.html">Web Animations 仕様の和訳</a>
の一部を別に分けたものです（仕様メタデータは、そこを参照されたし）。
】</p>

</header>

<div id="MAIN" hidden>

<main id="MAIN0">

	<section id="programming-interface">
<h2 title="Programming interface">6. ~API</h2>

<div class="informative">
◎非規範的

<p>
上で述べた抽象-~modelに加えて，この仕様は、
~modelに対する~APIも定義する。
この~interfaceは、
次のために利用できる
⇒＃
宣言的~手段により生産された~animationを拡張したり, 検分する ／
手続-的~approachの方が相応しいときに，~animationを直に生産する
◎
In addition to the abstract model described above, Web Animations also defines a programming interface to the model. This interface can be used to inspect and extend animations produced by declarative means or for directly producing animations when a procedural approach is more suitable.
</p>
</div>

		<section id="time-values-in-the-programming-interface">
<h3 title="Time values in the programming interface">6.1. ~APIにおける時刻~値</h3>

<p>
~APIにおいては、
`時刻~値$は `double?^I 型で表現される。
値 ~NULL が時刻~値`未解決$を表現する。
【すなわち、未解決は ~NULL の別名。】
◎
Time values are represented in the programming interface with the type double. Unresolved time values are represented by the value null.
</p>

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

<p>
`時列線$は、
~WAnim~APIにおいては `AnimationTimeline$I ~interfaceで表現される。
◎
Timelines are represented in the Web Animations API by the AnimationTimeline interface.
</p>

<pre class="idl">
[`Exposed$=Window]
interface `AnimationTimeline@I {
  readonly attribute `double$? `currentTime$m;
};
</pre>

<dl class="idl-def">
	<dt>
`currentTime@m
◎
currentTime, of type double, readonly, nullable
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET ［
コレは`作動中$でないならば ~NULL ／
~ELSE_ コレの`現-時刻$tL
］
◎
Returns the current time for this timeline or null if this timeline is inactive.
</dd>
</dl>

		</section>
		<section id="the-documenttimeline-interface">
<h3 title="The DocumentTimeline interface">6.3. `DocumentTimeline^I ~interface</h3>

<p>
~WAnim~APIにおいては、
`文書~時列線$は
— `既定の文書~時列線$も含め —
`DocumentTimeline$I ~interfaceで表現される。
◎
Document timelines, including the default document timeline, are represented in the Web Animations API by the DocumentTimeline interface.
</p>

<pre class="idl">
dictionary `DocumentTimelineOptions@I {
  `DOMHighResTimeStamp$I `originTime$m = 0;
};

[`Exposed$=Window]
interface `DocumentTimeline@I : `AnimationTimeline$I {
  `DocumentTimeline$mc(optional `DocumentTimelineOptions$I %options = {});
};
</pre>

<dl class="idl-def">
	<dt>
`DocumentTimelineOptions^II`originTime@m1
◎
originTime, of type DOMHighResTimeStamp, defaulting to 0
</dt>
	<dd>
時列線~用の`起点~時刻$を，`時刻~起点$enVに相対的な~milli-秒による実数-として指定する。
◎
The origin time for the timeline specified as a real number of milliseconds relative to the time origin.
</dd>
</dl>

<dl class="idl-def">
	<dt>
`DocumentTimeline(options)@m0
◎
DocumentTimeline (options)
</dt>
	<dd class="algo">
構築子~手続きは
⇒
コレが表現する`文書~時列線$の
⇒＃
`属する文書$ ~SET `現在の大域~obj$（ `Window$I ）に`結付けられた文書$,
`起点~時刻$ ~SET %options[ `DocumentTimelineOptions^II"`originTime$m1" ]
◎
Creates a new DocumentTimeline. The Document with which the timeline is associated is the Document associated with the Window that is the current global object.
</dd>
	<dd>
%options 引数は、
新たに作成される時列線~用の環境設定~parameter群を与える。
この仕様は `originTime$m1 ~memberのみを定義するが、
他の仕様は，この集合を拡張してもヨイ。
◎
Configuration parameters for the newly-created timeline. This specification defines only the originTime member but other specifications may extend this set.
</dd>
</dl>

		</section>
		<section id="the-animation-interface">
<h3 title="The Animation interface">6.4. `Animation^I ~interface</h3>

<p>
`~animation$は、
~WAnim~APIにおいては
`Animation$I ~interfaceで表現される。
◎
Animations are represented in the Web Animations API by the Animation interface.
</p>

<pre class="idl">
[`Exposed$=Window]
interface `Animation@I : `EventTarget$I {
  `Animation$mc(optional `AnimationEffect$I? %effect = null, optional `AnimationTimeline$I? %timeline);

           attribute `DOMString$                `id$m;
           attribute `AnimationEffect$I?         `effect$m;
           attribute `AnimationTimeline$I?       `timeline$m;
           attribute `double$?                  `startTime$m;
           attribute `double$?                  `currentTime$m;
           attribute `double$                   `playbackRate$m;
  readonly attribute `AnimationPlayState$I       `playState$m;
  readonly attribute `AnimationReplaceState$I    `replaceState$m;
  readonly attribute `boolean$                  `pending$m;
  readonly attribute `Promise$&lt;`Animation$I&gt;       `ready$m;
  readonly attribute `Promise$&lt;`Animation$I&gt;       `finished$m;
           attribute `EventHandler$I             `onfinish$m;
           attribute `EventHandler$I             `oncancel$m;
           attribute `EventHandler$I             `onremove$m;
  `undefined$ `cancel$m();
  `undefined$ `finish$m();
  `undefined$ `play$m();
  `undefined$ `pause$m();
  `undefined$ `updatePlaybackRate$m(`double$ %playbackRate);
  `undefined$ `reverse$m();
  `undefined$ `persist$m();
  [`CEReactions$] `undefined$ `commitStyles$m();
};
</pre>

<dl class="idl-def">
	<dt>`Animation(effect, timeline)@m0</dt>
	<dd class="algo">
<p>
構築子~手続きは：
◎
Creates a new Animation object using the following procedure:
• Let animation be a new Animation object.
</p>
		<ol>
			<li>
~IF［
%timeline ~EQ ε
］
⇒
%timeline ~SET `現在の大域~obj$（ `Window$I ）に`結付けられた文書$の`既定の文書~時列線$
◎
↓</li>
			<li>
`時列線を設定する$( コレ, %timeline )
◎
Run the procedure to set the timeline of an animation on animation passing timeline as the new timeline; or, if the timeline argument is missing, passing the default document timeline of the Document associated with the Window that is the current global object.
</li>
			<li>
`結付けられる効果を設定する$( コレ, %effect )
◎
Run the procedure to set the associated effect of an animation on animation passing source as the new effect.
</li>
		</ol>
	</dd>
	<dd class="parameters">
%effect 引数（省略可能）は、
~NULL でないならば，
新たに作成する`~animation$に`結付けられた効果$としてアテガうものを指定する。
◎
effect
• An optional value which, if not null, specifies the associated effect to assign to the newly created animation.
</dd>
	<dd class="parameters">
%timeline 引数（省略可能）は、
新たに作成される`~animation$に結付ける`時列線$を指定する。
与えられていない場合、
`現在の大域~obj$（ `Window$I ）に`結付けられた文書$の`既定の文書~時列線$が利用される。
◎
timeline
• An optional value which, if present, specifies the timeline with which to associate the newly-created animation. If missing, the default document timeline of the Document associated with the Window that is the current global object is used.
</dd>

	<dt>
`id@m
◎
id, of type DOMString
</dt>
	<dd>
この~animationを識別するために利用される文字列。
◎
A string used to identify the animation.
</dd>
	<dd class="trans-note">【
取得子は、
最後に設定された値を返す。
設定子は、
この属性を所与の値に設定する
（その名に反し、一意性は要求されていない）。
初期~時は、
（他の値で初期化されない限り）空~文字列にされる。
】</dd>

	<dt>
`effect@m
◎
effect, of type AnimationEffect, nullable
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレに`結付けられた効果$
◎
The associated effect of this animation.＼
</dd>
	<dd>
設定して，この~animationに`結付けられた効果$を更新できる。
◎
Setting this attribute updates the object’s associated effect＼
</dd>
	<dd class="algo">
設定子~手続きは
⇒
`結付けられる効果を設定する$( コレ, 所与の値 )
◎
using the procedure to set the associated effect of an animation.
</dd>

	<dt>
`timeline@m
◎
timeline, of type AnimationTimeline, nullable
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`時列線$An
◎
The timeline associated with this animation.
</dd>
	<dd class="algo">
設定子~手続きは
⇒
`時列線を設定する$( コレ, 所与の値 )
◎
Setting this attribute updates the object’s timeline using the procedure to set the timeline of an animation.
</dd>

	<dt>
`startTime@m
◎
startTime, of type double, nullable
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`開始-時刻$
◎
Returns the start time of this animation.＼
</dd>
	<dd>
設定して，この~animationの`開始-時刻$を新たな値に更新できる。
◎
Setting this attribute updates the start time＼
</dd>
	<dd class="algo">
設定子~手続きは
⇒
`開始-時刻を設定する$( コレ )
◎
using the procedure to set the start time of this object to the new value.
</dd>

	<dt>
`currentTime@m
◎
currentTime, of type double, nullable
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`現-時刻$
◎
The current time of this animation.＼
</dd>
	<dd>
設定して，この~animationの`現-時刻$を変更できる。
◎
↓</dd>
	<dd class="algo">
設定子~手続きは
⇒
`現-時刻を設定する$( コレ, 所与の値 )
◎
Setting this attribute follows the procedure to set the current time of this object to the new value.
</dd>

	<dt>
`playbackRate@m
◎
playbackRate, of type double
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`再生~rate$
◎
The playback rate of this animation.＼
</dd>
	<dd>
設定して，この~animationの`再生~rate$を変更できる。
◎
↓</dd>
	<dd class="algo">
設定子~手続きは
⇒
`再生~rateを設定する$( コレ, 所与の値 )
◎
Setting this attribute follows the procedure to set the playback rate of this object to the new value.
</dd>
	<dd class="note">注記：
この属性を設定すれば、
`再生~rate$の同期的な更新を遂行できる。
すなわち、［
別々な~thread等で走らせている~animationの再生~状態
］と同期しようと試みることはない。
したがって、
~animationが再生中の間に `playbackRate$m を設定した場合，
~jumpを生じさせ得る。
◎
Setting this attribute performs a synchronous update to the playback rate meaning that it does not make any attempt to synchronize with the playback state of animations running on a separate process or thread. As a result, setting the playbackRate for an in-flight animation can cause it to jump.
</dd>
	<dd class="note">注記：
~animationが再生中のときでも，`再生~rate$を滑らかに更新するためには、
非同期的 `updatePlaybackRate()$m ~methodを利用すること。
◎
To set the playback rate for an in-flight animation such that it smoothly updates, use the asynchronous updatePlaybackRate() method.
</dd>

	<dt>
`playState@m
◎
playState, of type AnimationPlayState, readonly
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`再生-状態$に対応する `AnimationPlayState$I 値
◎
The play state of this animation.
</dd>

	<dt>
`replaceState@m
◎
replaceState, of type AnimationReplaceState, readonly 
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`置換-状態$に対応する `AnimationReplaceState$I 値
◎
The replace state of this animation.
</dd>

	<dt>
`pending@m
◎
pending, of type boolean, readonly
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET ~IS［
コレの`処理待ち再生-~task$ ~NEQ ε
］~OR［
コレの`処理待ち静止-~task$ ~NEQ ε
］
◎
Returns true if this animation has a pending play task or a pending pause task.
</dd>

	<dt>
`ready@m
◎
ready, of type Promise&lt;Animation&gt;, readonly
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`現在の準備済み~promise$
◎
Returns the current ready promise for this object.
</dd>

	<dt>
`finished@m
◎
finished, of type Promise&lt;Animation&gt;, readonly
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`現在の完遂d~promise$
◎
Returns the current finished promise for this object.
</dd>

	<dt>
`onfinish@m
◎
onfinish, of type EventHandler
</dt>
	<dd>
`finish$et ~event用の~event~handler。
◎
The event handler for the finish event.
</dd>

	<dt>
`oncancel@m
◎
oncancel, of type EventHandler
</dt>
	<dd>
`cancel$et ~event用の~event~handler。
◎
The event handler for the cancel event.
</dd>

	<dt>
`onremove@m
◎
onremove, of type EventHandler
</dt>
	<dd>
`remove$et ~event用の~event~handler。
◎
The event handler for the remove event.
</dd>

	<dt>
`cancel()@m
◎
void cancel()
</dt>
	<dd>
この~animationにより生じたすべての効果を~clearして，再生を中止する。
◎
Clears all effects caused by this animation and aborts its playback＼
</dd>
	<dd class="algo">
~method手続きは
⇒
`~animationを取消す$( コレ )
◎
by running the cancel an animation procedure for this object.
</dd>

	<dt>
`finish()@m
◎
void finish()
</dt>
	<dd>
この~animationを［
現在の方向において`結付けられた効果の終端$
］へ`~seek$する。
◎
Seeks the animation to the associated effect end in the current direction＼
</dd>
	<dd class="algo">
~method手続きは
⇒
`~animationを完遂する$( コレ )
（例外が投出され得る）
◎
by running the finish an animation procedure for this object.
◎
不要
DOMException of type "InvalidStateError"
• Raised if this animation’s playback rate is zero, or if this animation’s playback rate is &gt; zero and the associated effect end is infinity.
</dd>

	<dt>
`play()@m
◎
void play()
</dt>
	<dd>
この~animationの再生を始める／再開する。
◎
Begins or resumes playback of the animation by＼
</dd>
	<dd class="algo">
~method手続きは
⇒
`~animationを再生する$( コレ, `自動で巻戻す^i )
◎
running the procedure to play an animation passing true as the value of the auto-rewind flag.
</dd>

	<dt>
`pause()@m
◎
void pause()
</dt>
	<dd>
この~animationの再生を休止する。
◎
Suspends the playback of this animation＼
</dd>
	<dd class="algo">
~method手続きは
⇒
`~animationを静止する$( コレ )
◎
by running the procedure to pause an animation for this object.
</dd>

	<dt>
`updatePlaybackRate(playbackRate)@m
◎
void updatePlaybackRate(playbackRate)
</dt>
	<dd>
この~animationの`再生~rate$を非同期的に更新する。
◎
Performs an asynchronous update of the playback rate of this animation＼
</dd>
	<dd class="algo">
~method手続きは
⇒
`再生~rateを継目無く更新する$( コレ, %playbackRate )
◎
by performing the seamlessly update the playback rate procedure, passing playbackRate as the new playback rate.
</dd>
	<dd class="parameters">
%playbackRate は、
更新に利用する再生~rateを有限な実数-で指定する。
◎
playbackRate
• A finite real number specifying the updated playback rate to use.
</dd>

	<dt>
`reverse()@m
◎
void reverse()
</dt>
	<dd>
この~animationの`再生~rate$を反転した上で、
それを利用して再生する。
◎
Inverts the playback rate of this animation and plays it＼
</dd>
	<dd class="algo">
~method手続きは
⇒
`~animationを逆転する$( コレ )
◎
using the reverse an animation procedure for this object.＼
</dd>
	<dd>
この~methodは、［
`play()$m と同じく，~animationの静止-を解く
］ことに加え、
~animationが 逆方向への再生-をすでに完遂していた場合には，
`結付けられた効果$の始端へ`~seek$する。
◎
As with play(), this method unpauses the animation and, if the animation has already finished playing in the reversed direction, seeks to the start of the associated effect.
</dd>

	<dt>`persist()@m</dt>
	<dd class="algo">
~method手続きは
⇒
コレの`置換-状態$ ~SET `持続化$i
◎
Sets this animation’s replace state to persisted.
</dd>

	<dt>`commitStyles()@m</dt>
	<dd>
この~animationの`~animation効果$により生産された現在の`効果~値$を，
対応している`効果~target$の~inline~style【`~style属性$】に書込む。
◎
Writes the current effect values produced by this animation’s animation effects to their corresponding effect targets' inline style＼
</dd>
	<dd class="algo">
~method手続きは
⇒
`算出d~styleを~commitする$( コレ )
◎
using the commit computed styles procedure.
</dd>
	<dd>
この~interface上に定義される他のほとんどの~methodと違って、
この~methodを~callすると，
`~style変化~event$を`誘発する^em
（ `§ ~modelの~live性＠#model-liveness$
を見よ）。
◎
Unlike most other methods defined on this interface, calling this method does trigger a style change event (see § 6.13 Model liveness).
</dd>
	<dd class="note">
<p>注記：
`算出d~styleを~commitする$手続-は［
この~animationが`除去-済み$iであっても，それ用の`効果~値$を含む
］ので、
この~methodは［
置換された後にも，実際の~animationを維持することなく~animationの効果を維持する
］ために有用になる
（ `§ 置換された~animationの除去-法＠~WANIM#removing-replaced-animations$を見よ）。
◎
Since the procedure to commit computed styles includes the effect values for the animation even if it is removed, this method is useful for retaining the effect of an animation after it has been replaced (see § 5.5.2 Removing replaced animations) without retaining the actual animation.
</p>

<p>
~commitされる値は、
この~methodが~callされた時点における，
`~animation効果$により生産された`算出d値^emであることに注意。
これらの値は算出d値【言い換えれば、確定的な値】なので、［
~live~animationが生産する値のように，文脈に対する変更を反映する
］ことはない
— ［
~CSS変数の変化に対し応答する／
`font-size^p の算出d値の変化に基づいて `em^u 単位を計算し直す
］など。
◎
Note that the values committed are the computed values produced by the animation effects at the time when this method is called. Since these values are computed values, they do not reflect to changes to context such as responding to changes to CSS variables or recalculating em units based on changes to the computed font-size in the way the values produced by a live animation would.
</p>

<p>
`persist()$m ~methodを利用すれば、
当の~animationが置換された後に
（ `§ ~animationの置換-法＠~WANIM#replacing-animations$
を見よ），
延伸している~animationの結果が成す全部的な忠実性を維持できるが、
当の~animationが資源を消費し続けることにもなることに注意。
◎
In order to retain full fidelity of a filling animation’s result after it has been replaced (see § 5.5 Replacing animations), the persist() method can be used, but note that doing so will mean the animation continues to consume resources.
</p>
	</dd>
</dl>

<div class="algo">
<p>
`算出d~styleを~commitする@
~algoは、
所与の
( `~animation$ %~animation )
に対し：
◎
To commit computed styles for an animation, animation:
</p>

<ol>
	<li>
<p>
%~targetたち ~LET 
%~animation に`結付けられた効果$【！~animation効果】たち†の`効果~target$からなる`集合$
</p>

<p class="trans-note">【†
原文には、
各~animationには複数個の`~animation効果$があり得るかのように記されているが、
そのような記述は他所にはなく，よくわからない。
】</p>
◎
Let targets be the set of all effect targets for animation effects associated with animation.
</li>
	<li>
<p>
%~targetたち を成す
~EACH( %~target )
に対し：
◎
For each target in targets:
</p>
		<ol>
			<li>
~IF［
%~target は，`~style属性$ `CSS-STYLE-ATTR$r を~~適用可能な要素でない（例：疑似要素, 文書~形式において~style属性は定義されていない要素）
］
⇒
~THROW `NoModificationAllowedError$E
◎
If target is not an element capable of having a style attribute [CSS-STYLE-ATTR] (for example, it is a pseudo-element or is an element in a document format for which style attributes are not defined) throw a "NoModificationAllowedError" DOMException and abort these steps.
</li>
			<li>
<p>
~IF［
処理待ち~style変化を適用した後， %~target は`具現化され$ない
］
⇒
~THROW `InvalidStateError$E
◎
If, after applying any pending style changes, target is not being rendered, throw an "InvalidStateError" DOMException and abort these steps.
</p>

<p class="issue">
`HTML$r による “`具現化され$る” の定義は、
`display$p に関して依然として
`論の最中＠~HTMLissue/1837$にある。
この手続-の目的においては、
要素は［
`display^p が `contents^v でなかったなら~layout~boxが結付けられる
（すなわち、
`接続されて$いて， `display^p が `none^v にされた要素でも, その子孫でもない）
］ならば、
具現化されるものと見做される。
◎
The definition of being rendered [HTML] with regards to display: contents is still under discussion. For the purpose of this procedure, we assume that an element with display: contents that otherwise would have associated layout boxes (i.e. it is connected and not part of a display: none subtree) is being rendered.
</p>
			</li>
			<li>
%~inline~style ~LET ［
%~target の`属性~list$内に`~style属性$が在るならば それに対応している`~CSS宣言~block$ ／
~ELSE_ 次のようにされた新たな`~CSS宣言~block$
］
⇒＃
`宣言~群$dB ~SET 空,
`算出-済みか$dB ~SET ~F,
`所有者~node$dB ~SET %~target
◎
Let inline style be the result of getting the CSS declaration block corresponding to target’s style attribute. If target does not have a style attribute, let inline style be a new empty CSS declaration block with the owner node set to target.
</li>
			<li>
%~targetにされた~propたち ~LET 次を満たす~prop %~prop が成す`集合$
⇒
［
%~prop は `physical longhand^en
【`論理-~prop＠~CSSLOGICAL$でない下位prop】
である
］~AND［
次を満たす~animation効果 %効果 がある
］
⇒
［
%~prop は %効果 の`~target~prop$である
］~AND［
%効果 を`結付けた~animation$ ~EQ %~animation
］~AND［
%効果 の`効果~target$ ~EQ %~target
］
◎
Let targeted properties be the set of physical longhand properties that are a target property for at least one animation effect associated with animation whose effect target is target.
</li>
			<li>
<p>
%~targetにされた~propたち を成す
~EACH( %~prop )
に対し：
◎
For each property, property, in targeted properties:
</p>
				<ol>
					<li>
%部分的な効果~stack ~LET %~target 上の %~prop 用の`効果~stack$の複製
◎
Let partialEffectStack be a copy of the effect stack for property on target.
</li>
					<li>
~IF［
%~animation の`置換-状態$ ~EQ `除去-済み$i
］
⇒
%部分的な効果~stack に次を満たす`~animation効果$ %効果 すべてを追加する
⇒
［
%効果 を`結付けた~animation$ ~EQ %~animation
］~AND［
%効果 の`効果~target$ ~EQ %~target
］~AND［
%~prop は %効果 の`~target~prop$である
］
◎
If animation’s replace state is removed, add all animation effects associated with animation whose effect target is target and that include property as a target property to partialEffectStack.
</li>
					<li>
%部分的な効果~stack から，次を満たす`~animation効果$をすべて除去する
⇒
それを`結付けた~animation$は、
`組成-順序$において %~animation より後
◎
Remove from partialEffectStack any animation effects whose associated animation has a higher composite order than animation.
</li>
					<li>
%効果~値 ~LET `組成d値$( %部分的な効果~stack, %~target 上の %~prop の算出d値 )
【！＠~WANIM#calculating-the-result-of-an-effect-stack】
◎
Let effect value be the result of calculating the result of partialEffectStack for property using target’s computed style (see § 5.4.3 Calculating the result of an effect stack).
</li>
					<li>
`~CSS宣言を設定する$( %~inline~style, %~prop, %効果~値 )
◎
Set a CSS declaration of property for effect value in inline style.
</li>
				</ol>
			</li>
			<li>
%~inline~style 用の`~style属性を更新する$
◎
Update style attribute for inline style.
</li>
		</ol>
	</li>
</ol>
</div>

			<section id="the-animationplaystate-enumeration">
<h4 title="The AnimationPlayState enumeration">6.4.1. `AnimationPlayState^I 列挙</h4>

<pre class="idl">
enum `AnimationPlayState@I { `idle$l, `running$l, `paused$l, `finished$l };
</pre>

<p class="trans-note">【
この列挙は、
~animationの`再生-状態$を表現する値を与える。
】</p>

<dl class="idl-def">
	<dt>`idle@l</dt>
	<dd>
`遊休中$iに対応する。
◎
Corresponds to the idle play state.
</dd>

	<dt>`running@l</dt>
	<dd>
`稼働中$iに対応する。
◎
Corresponds to the running play state.
</dd>

	<dt>`paused@l</dt>
	<dd>
`静止中$iに対応する。
◎
Corresponds to the paused play state.
</dd>

	<dt>`finished@l</dt>
	<dd>
`完遂d$iに対応する。
◎
Corresponds to the finished play state.
</dd>
</dl>

			</section>
			<section id="the-animationreplacestate-enumeration">
<h4 title="The AnimationReplaceState enumeration">6.4.2. `AnimationReplaceState^I 列挙</h4>

<pre class="idl">
enum `AnimationReplaceState@I { `active$l, `removed$l, `persisted$l };
</pre>

<p class="trans-note">【
この列挙は、
~animationの`置換-状態$を表現する値を与える。
】</p>

<dl class="idl-def">
	<dt>`active@l</dt>
	<dd>
`作動中$iに対応する。
◎
Corresponds to the active replace state.
</dd>

	<dt>`removed@l</dt>
	<dd>
`除去-済み$iに対応する。
◎
Corresponds to the removed replace state.
</dd>

	<dt>`persisted@l</dt>
	<dd>
`持続化$iに対応する。
◎
Corresponds to the persisted replace state.
</dd>
</dl>

			</section>
		</section>
		<section id="the-animationeffect-interface">
<h3 title="The AnimationEffect interface">6.5. `AnimationEffect^I ~interface</h3>

<p>
`~animation効果$は、
~WAnim~APIにおいては，抽象- `AnimationEffect$I ~interfaceで表現される。
◎
Animation effects are represented in the Web Animations API by the abstract AnimationEffect interface.
</p>

<pre class="idl">
[`Exposed$=Window]
interface `AnimationEffect@I {
  `EffectTiming$I `getTiming$m();
  `ComputedEffectTiming$I `getComputedTiming$m();
  `undefined$ `updateTiming$m(optional `OptionalEffectTiming$I %timing = {});
};
</pre>

<div class="note">
<p>注記：
将来においては、
~animation効果を
`§ 計時~model$
から離れた所でも駆動できるよう，
次のような~memberを公開し得る：
</p>

<pre class="idl">
any onupdate(double? %progress, double %currentIteration, Animatable? %target, any %underlyingValue)
</pre>

◎
Note: In future, we may expose any onupdate (double? progress, double currentIteration, Animatable? target, any underlyingValue) so that the animation effects can be driven apart from the timing model.
</div>

<dl class="idl-def">
	<dt>`getTiming()@m</dt>
	<dd>
この`~animation効果$用に指定された計時~propたちを返す。
◎
Returns the specified timing properties for this animation effect.
</dd>
	<dd>
返される `EffectTiming$I ~objを成す各~memberと
`§ 計時~model$
を成す各~propとの対応関係については、
その~interfaceを見よ。
◎
For the correspondence between the members of the returned EffectTiming object and properties of the timing model, see the EffectTiming interface.
</dd>

	<dt>`getComputedTiming()@m</dt>
	<dd>
この`~animation効果$用に計算される計時~propたちを返す。
◎
Returns the calculated timing properties for this animation effect.
</dd>
	<dd>
<p>
［
`getTiming()$m, `getComputedTiming()$m
］が返す `EffectTiming$I ~objを成す一部の~memberは，共通するが、
それらの値は，次の仕方で相違し得る：
◎
Although some of the attributes of the object returned by getTiming() and getComputedTiming() are common, their values can differ in the following ways:
</p>
		<ul>
			<li>
<p>
`duration$m1
⇒
`getTiming()$m は文字列 `auto^l を返すこともある一方で、
`getComputedTiming()$m は
— その~memberの定義に述べるように —
`反復~所要時間$を表す実数を返すモノトスル。
◎
duration – while getTiming() can return the string auto, getComputedTiming() must return a number corresponding to the calculated value of the iteration duration as defined in the description of the duration member of the EffectTiming interface.
</p>

<p>
仕様のこの~levelでは、
`auto^l 値は，単純に 0 に置換されることを意味する。
◎
In this level of the specification, that simply means that an auto value is replaced by zero.
</p>
	</li>
	<li>
<p>
`fill$m1
⇒
`getTiming()$m は文字列 `auto^l を返すこともある一方で、
`getComputedTiming()$m は
— その~memberの定義に述べるように —
計時~計算に利用する特定の `FillMode$I を返すモノトスル。
◎
fill – likewise, while getTiming() can return the string auto, getComputedTiming() must return the specific FillMode used for timing calculations as defined in the description of the fill member of the EffectTiming interface.
</p>

<p>
この仕様のこの~levelでは、
`auto^l 値は 単純に `FillMode$I `none^l に置換されることを意味する。
◎
In this level of the specification, that simply means that an auto value is replaced by the none FillMode.
</p>
			</li>
		</ul>
	</dd>
	<dd class="note">注記：
他の計時~memberは、
将来には `auto^l の様な値を含むよう拡張される見込みが高い。
作者には、
計時~計算を遂行するときには，
アリ~なら `getComputedTiming()$m を利用することが奨励される
— 指定d値に許容される範囲や型が変更されたときの非互換性を避けるため。
◎
Note: It is likely that other timing members could be extended in future to include auto-like values. When performing timing calculations, authors are encouraged to use getComputedTiming() where possible to avoid incompatibility should the range or type of allowed specified values be changed.
</dd>
	<dd>
`getComputedTiming()$m が返す `ComputedEffectTiming$I 辞書には、
`getTiming()$m に比較して，追加的な計時~情報も定義される。
◎
In addition to possible differences in the values returned, compared to getTiming(), getComputedTiming() returns additional timing information as defined by the ComputedEffectTiming dictionary.
</dd>

	<dt>`updateTiming(timing)@m</dt>
	<dd>
この`~animation効果$に指定された計時~propたちを更新する。
◎
Updates the specified timing properties of this animation effect＼
</dd>
	<dd class="algo">
~method手続きは
⇒
`~animation効果の計時~propを更新する$( コレ, %timing )
◎
by performing the procedure to update the timing properties of an animation effect passing the timing parameter as input.
</dd>
	<dd class="parameters">
%timing 引数は、
更新する計時~propたちを与える。
改変される計時~propは、
%timing 上に`存在-$する~memberに対応するものに限られる。
◎
optional OptionalEffectTiming timing
• The timing properties to update. The timing properties corresponding to any members that do not exist on timing will not be modified.
</dd>
</dl>

<p class="issue">
`remove()^m ~method【この仕様には定義されていない】を利用して［
親~group／~animation
］から効果を除去できる。
それを~level 1 に保って，単純に~animationから~animation効果を除去するものと定義するべきか？
[`2082$issue]
◎
The remove() method can be used to remove an effect from either its parent group or animation. Should we keep it in level 1 and define it simply as removing the animation effect from its animation? [Issue #2082]
</p>

			<section id="the-effecttiming-dictionaries">
<h4 title="The EffectTiming and OptionalEffectTiming dictionaries">6.5.1. `EffectTiming^I, `OptionalEffectTiming^I 辞書</h4>

<p>
`EffectTiming$I 辞書は、
`AnimationEffect$I の計時~propたちを表現する。
◎
The EffectTiming dictionary represents the timing properties of an AnimationEffect.
</p>

<p>
`OptionalEffectTiming$I 辞書は、
`EffectTiming$I 辞書の変種であり，
一部の~memberに限り`存在-$することも許容する。
`AnimationEffect$I ~interfaceの `updateTiming()$m1 ~methodは、
これを利用して，`~animation効果$の計時~propたちに対する差分~更新を遂行する。
◎
The OptionalEffectTiming dictionary is a variant of the EffectTiming dictionary that allows some members to not exist. This is used by the updateTiming() method of the AnimationEffect interface to perform a delta update to the timing properties of an animation effect.
</p>

<pre class="idl">
dictionary `EffectTiming@I {
  `double$                             `delay$m = 0;
  `double$                             `endDelay$m = 0;
  `FillMode$I                           `fill$m = "auto";
  `double$                             `iterationStart$m = 0.0;
  `unrestricted double$                `iterations$m = 1.0;
  (`unrestricted double$ or `DOMString$) `duration$m = "auto";
  `PlaybackDirection$I                  `direction$m = "normal";
  `DOMString$                          `easing$m = "linear";
};

dictionary `OptionalEffectTiming@II {
  `double$                             `delay$m;
  `double$                             `endDelay$m;
  `FillMode$I                           `fill$m;
  `double$                             `iterationStart$m;
  `unrestricted double$                `iterations$m;
  (`unrestricted double$ or `DOMString$) `duration$m;
  `PlaybackDirection$I                  `direction$m;
  `DOMString$                          `easing$m;
};
</pre>

<dl class="idl-def">
	<dt>
`delay@m
◎
delay, of type double, defaulting to 0
</dt>
	<dd>
`開始-遅延$を与える
— それは、
当の`~animation効果$を`結付けた~animation$の`開始-時刻$から
当の`~animation効果$の`作動~区間$の始端まで
］の~milli-秒数を表現する。
◎
The start delay, which represents the number of milliseconds from the start time of the associated animation to the start of the active interval.
</dd>

	<dt>
`endDelay@m
◎
endDelay, of type double, defaulting to 0
</dt>
	<dd>
`終止-遅延$を与える
— それは、
当の`~animation効果$の［
`作動~区間$の終端から`終止-時刻$まで
］の~milli-秒数を表現する。
◎
The end delay, which represents the number of milliseconds from the end of an animation effect’s active interval until its end time.
</dd>

	<dt>
`fill@m
◎
fill, of type FillMode, defaulting to "auto"
</dt>
	<dd>
`延伸~mode$を与える
— それは、
当の`~animation効果$の`作動~区間$の外側における挙動を定義する。
◎
The fill mode, which defines the behavior of the animation effect outside its active interval.
</dd>
	<dd>
計時~計算を遂行するときには、
特別な文字列~値 `auto^l は，
`§ 計時~model$
により認識されるいずれかの`延伸~mode$に展開される
— すなわち、
次に対応する`延伸~mode$を利用する
⇒＃
当の`~animation効果$は`~keyframe効果$であるならば `ナシ$i （ `none^l ）／
~ELSE_ `両方$i （ `both^l ）
◎
When performing timing calculations the special string value auto is expanded to one of the fill modes recognized by the timing model as follows:
◎
If the animation effect to which the fill mode is being applied is a keyframe effect,
• Use none as the fill mode.
◎
Otherwise,
• Use both as the fill mode.
</dd>
	<dd class="advisement">
`§ 延伸の挙動と延伸~mode＠~WANIM#fill-behavior$
にて述べたとおり、
作者には，際限なく延伸する~animationを利用しないことが奨励される。
◎
 As described in § 4.6.8 Fill behavior and fill modes, authors are discouraged from using indefinitely filling animations.
</dd>

	<dt>
`iterationStart@m
◎
iterationStart, of type double, defaulting to 0.0
</dt>
	<dd>
当の`~animation効果$の`反復~始端$を与える
— それは 0 以上の有限な実数-であり、
~animation効果が始まるのは［
どの`反復~index$の反復~内のどの進捗からか
］を表現する。
◎
The animation effect’s iteration start property, which is a finite real number greater than or equal to zero representing the iteration index at which the animation effect begins and its progress through that iteration.
</dd>
	<dd>
例えば：
値 0.5 は、
~animation効果は 1 回目の反復の中間点から始まることを指示する。
値 1.2 は、
~animation効果は 2 回目の反復の 20% から始まることを指示する。
◎
For example, a value of 0.5 indicates that the animation effect begins halfway through its first iteration. A value of 1.2 indicates the animation effect begins 20% of the way through its second iteration.
</dd>
	<dd class="note">注記：
`iterations$m の値は、
実質的に `iterationStart$m に`加算される^em
— 例えば
`iterations$m が 2 にされた~animation効果は、
`iterationStart$m が 0.5 にされても 2 周~繰返すことになるが，
各`反復~区間$の中間点で始まって中間点で終端することになる。
◎
Note that the value of iterations is effectively added to the iterationStart such that an animation effect with an iterationStart of "0.5" and iterations of "2" will still repeat twice. However it will begin and end halfway through its iteration interval.
</dd>
	<dd class="note">注記：
1 以上の `iterationStart$m 値が有用になるのは、
概して，［
`反復~組成-演算~型$が `累積-^i である~animation効果と併用されたとき
］または［
`現在の反復~index$が有意になるとき
］に限られる。
◎
iterationStart values greater than or equal to 1 are typically only useful in combination with an animation effect that has an iteration composite operation of accumulate or when the current iteration index is otherwise significant.
</dd>

	<dt>
`iterations@m
◎
iterations, of type unrestricted double, defaulting to 1.0
</dt>
	<dd>
当の`~animation効果$の`反復~回数$を与える
— それは、
0 以上の実数-（正な無限大も含む）であり，
~animation効果が繰返す回数を表現する。
◎
The animation effect’s iteration count property which is a real number greater than or equal to zero (including positive infinity) representing the number of times to the animation effect repeats.
</dd>
	<dd>
これは、
正な無限大に設定されてもヨイ
— 当の`~animation効果$は、
永遠に繰返されることになる
（効果の所要時間が 0 でない限り
— その事例では、
即時に完遂することになる）。
◎
This may be set to +Infinity to cause the animation effect to repeat forever (unless the duration of the effect is zero, in which case it will finish immediately).
</dd>

	<dt>
`duration@m
◎
duration, of type (unrestricted double or DOMString), defaulting to "auto"
</dt>
	<dd>
`反復~所要時間$を 0 以上の実数-（正な無限大も含む）で与える。
当の`~animation効果$の 1 回の反復を完了するまでにかかる時間を表現する。
◎
The iteration duration, which is a real number greater than or equal to zero (including positive infinity) representing the time taken to complete a single iteration of the animation effect.
</dd>
	<dd>
`AnimationEffect^II
この~levelのこの仕様では、
文字列~値 `auto^l は
—［
`§ 計時~model$
における計算 ／
`getComputedTiming()$m1 が返す値の `duration$m ~memberの結果
］の目的においては —
0 に扱うとする。
しかしながら， 作者が指定した `auto^l 値に対しては、
~UAは［
`getTiming()$m1 が返す値の `duration$m ~memberは `auto^l を返す
］ようにするモノトスル。
◎
In this level of this specification, the string value auto is treated as the value zero for the purpose of timing model calculations and for the result of the duration member returned from getComputedTiming(). If the author specifies the auto value, user agents must, however, return auto for the duration member returned from getTiming().
</dd>
	<dd class="note">注記：
これは、
前方-互換性に備えるためにある
— この仕様の将来~levelは、
~group効果を導入することになり，［
そこでの `auto^l 値は、
子~効果の所要時間も含むよう拡げる
］ことが期待されるので。
◎
Note: This is a forwards-compatibility measure since a future level of this specification is expected to introduce group effects where the auto value expands to include the duration of the child effects.
</dd>

	<dt>
`direction@m
◎
direction, of type PlaybackDirection, defaulting to "normal"
</dt>
	<dd>
<p>
当の`~animation効果$の`再生~方向$を与える
— それは、
次の 2 つを定義する：
</p>
		<ul>
			<li>
再生は［
前方, 後方
］どちらへ進行するか
</li>
			<li>
再生~方向は各~反復ごとに交替するかどうか
</li>
		</ul>
◎
The playback direction of the animation effect, which defines whether playback proceeds forwards, backwards, or alternates on each iteration.
</dd>

	<dt>
`easing@m
◎
easing, of type DOMString, defaulting to "linear"
</dt>
	<dd>
`~easing関数$を与える
— それは、
時刻を伸縮して，~~加減速（ `easing^en ）効果を生産するために利用される。
◎
The easing function used to scale the time to produce easing effects.
</dd>
	<dd>
文字列の構文は、
`easing-function$t 生成規則により定義される。
`CSS-EASING-1$r
◎
The syntax of the string is defined by the &lt;easing-function&gt; production [CSS-EASING-1].
</dd>
</dl>

			</section>
			<section id="the-fillmode-enumeration">
<h4 title="The FillMode enumeration">6.5.2. `FillMode^I 列挙</h4>

<pre class="idl">
enum `FillMode@I { `none$l, `forwards$l, `backwards$l, `both$l, `auto$l };
</pre>

<p>
`~animation効果$の`延伸~mode$を表現する。
◎
Represents an animation effect’s fill mode.
</p>

<dl class="idl-def">
	<dt>`none@l</dt>
	<dd>
延伸しない
（`延伸~mode$ ~EQ `ナシ$i ）。
◎
No fill. (Fill mode none.)
</dd>

	<dt>`forwards@l</dt>
	<dd>
`前方$i へ延伸する。
◎
Fill forwards.
</dd>

	<dt>`backwards@l</dt>
	<dd>
`後方$i へ延伸する。
◎
Fill backwards.
</dd>

	<dt>`both@l</dt>
	<dd>
`両方$i
— 後方, 前方 —
へ延伸する。
◎
Fill both backwards and forwards.
</dd>

	<dt>`auto@l</dt>
	<dd>
延伸しない。
この仕様の後継~levelでは、
これは，他の型の`~animation効果$用に異なる挙動を生産し得る。
◎
No fill. In a subsequent level of this specification, this may produce different behavior for other types of animation effects.
</dd>
</dl>

			</section>
			<section id="the-playbackdirection-enumeration">
<h4 title="The PlaybackDirection enumeration">6.5.3. `PlaybackDirection^I 列挙</h4>

<pre class="idl">
enum `PlaybackDirection@I { `normal$l, `reverse$l, `alternate$l, `alternate-reverse$l };
</pre>

<dl class="idl-def">
	<dt>`normal@l</dt>
	<dd>
すべての反復は、
指定されたとおりに再生される。
◎
All iterations are played as specified.
</dd>

	<dt>`reverse@l</dt>
	<dd>
すべての反復は、
指定された順序と逆方向に再生される。
◎
All iterations are played in the reverse direction from the order they are specified.
</dd>

	<dt>`alternate@l</dt>
	<dd>
偶数~番【 0 番が初回】の反復は、
指定されたとおりに再生される。
奇数~番の反復は、
指定された順序と逆方向に再生される。
◎
Even iterations are played as specified, odd iterations are played in the reverse direction from the order they are specified.
</dd>

	<dt>`alternate-reverse@l</dt>
	<dd>
偶数~番【 0 番が初回】の反復は指定された順序の逆方向に再生される。
奇数~番の反復は指定されたとおりに再生される。
◎
Even iterations are played in the reverse direction from the order they are specified, odd iterations are played as specified.
</dd>
</dl>

			</section>
			<section id="updating-animationeffect-timing">
<h4 title="Updating the timing of an AnimationEffect">6.5.4. `AnimationEffect^I の計時の更新-法</h4>

<div class="algo">
<p>
`~animation効果の計時~propを更新する@
~algoは、
所与の
( %効果, ［
`EffectTiming$I0 ／ `OptionalEffectTiming$I
］~obj %入力
)
に対し：
◎
To update the timing properties of an animation effect, effect, from an EffectTiming or OptionalEffectTiming object, input, perform the following steps:
</p>

<ol>
	<li>
<p>
下の表t A の~EACH( %行 ) に対し
⇒
~IF［
%入力 には %行 の 1 列目に与える~memberは`存在-$する
］~AND［
その~memberの値は %行 の 2 列目に与える条件を満たさない
］
⇒
~THROW `TypeError^E
</p>

<table>
<caption>表t A</caption>
<thead>
<tr><th>~member
<th>条件（空欄は無条件）
<th>~prop
<tbody>

<tr><td>`delay$m
<td>
<td>`開始-遅延$

<tr><td>`endDelay$m
<td>
<td>`終止-遅延$

<tr><td>`fill$m
<td>
<td>`延伸~mode$

<tr><td>`iterationStart$m
<td>0 以上
<td>`反復~始端$

<tr><td>`iterations$m
<td>`NaN^jv でない, かつ 0 以上
<td>`反復~回数$

<tr><td>`duration$m
<td>［
文字列である
］~OR［
`NaN^jv でない, かつ 0 以上
］
<td>`反復~所要時間$

<tr><td>`direction$m
<td>
<td>`再生~方向$

<tr><td>`easing$m
<td>`easing-function$t 生成規則に合致する
<td>`~easing関数$
</table>

<p class="note">注記：
`RangeError^E ではなく `TypeError^E を利用している理由は、
~Web~IDLの [`EnforceRange$] 注釈の挙動に~~正確に~~倣うようにするためである
— 将来に，その注釈を浮動小数点~値にも利用-可能にするべく。
</p>

◎
If the iterationStart member of input exists and is less than zero, throw a TypeError and abort this procedure.
◎
Note: The reason for using a TypeError rather than a RangeError is to mirror the behavior of WebIDL’s [EnforceRange] annotation should that annotation be able to be used with floating-point values in the future.
◎
If the iterations member of input exists, and is less than zero or is the value NaN, throw a TypeError and abort this procedure.
◎
If the duration member of input exists, and is less than zero or is the value NaN, throw a TypeError and abort this procedure.
◎
If the easing member of input exists but cannot be parsed using the &lt;easing-function&gt; production [CSS-EASING-1], throw a TypeError and abort this procedure.
</li>
	<li>
上の表t A の~EACH( %行 ) に対し
⇒
~IF［
%行 の 1 列目に与える %入力 の~memberは`存在-$する
］
⇒
%効果 の［
%行 の 3 列目に与える~prop
］ ~SET その~memberの値
◎
Assign each member that exists in input to the corresponding timing property of effect as follows:
• delay → start delay
• endDelay → end delay
• fill → fill mode
• iterationStart → iteration start
• iterations → iteration count
• duration → iteration duration
• direction → playback direction
• easing → easing function
</li>
</ol>
</div>

			</section>
			<section id="the-computedeffecttiming-dictionary">
<h4 title="The ComputedEffectTiming dictionary">6.5.5. `ComputedEffectTiming^I 辞書</h4>

<p>
`§ 計時~model$
により計算される各種~計時~propは、
`ComputedEffectTiming$I 辞書~objを利用して公開される。
◎
Timing properties calculated by the timing model are exposed using ComputedEffectTiming dictionary objects.
</p>

<pre class="idl">
dictionary `ComputedEffectTiming@I : `EffectTiming$I {
  `unrestricted double$  `endTime$m;
  `unrestricted double$  `activeDuration$m;
  `double$?              `localTime$m;
  `double$?              `progress$m;
  `unrestricted double$? `currentIteration$m;
};
</pre>

<dl class="idl-def">
	<dt>
`endTime@m
◎
endTime, of type unrestricted double
</dt>
	<dd>
当の`~animation効果$の`終止-時刻$にされる
— `局所~時刻$ 0 からの~milli-秒で表出される
（すなわち、［
当の`~animation効果$を`結付けた~animation$ ~NEQ ε
］ならば，その`~animation$の`開始-時刻$からの）。
これは、
`~animation効果$の
( `作動-区間$の終端 ~PLUS `終止-遅延$ )
に対応する。
◎
The end time of the animation effect expressed in milliseconds since zero local time (that is, since the associated animation’s start time if this animation effect is associated with an animation). This corresponds to the end of the animation effect’s active interval plus any end delay.
</dd>

	<dt>
`activeDuration@m
◎
activeDuration, of type unrestricted double
</dt>
	<dd>
当の`~animation効果$の`作動~所要時間$にされる。
◎
The active duration of this animation effect.
</dd>

	<dt>
`localTime@m
◎
localTime, of type double, nullable
</dt>
	<dd>
当の`~animation効果$の`局所~時刻$にされる。
◎
The local time of this animation effect.
</dd>
	<dd>
これは、［
当の`~animation効果$を`結付けた~animation$ ~EQ ε
］ならば ~NULL にされる。
◎
This will be null if this animation effect is not associated with an animation.
</dd>

	<dt>
`progress@m
◎
progress, of type double, nullable
</dt>
	<dd>
当の`~animation効果$の現在の`反復~進捗$にされる。
◎
The current iteration progress of this animation effect.
</dd>

	<dt>
`currentIteration@m
◎
currentIteration, of type unrestricted double, nullable
</dt>
	<dd>
`現在の反復~index$にされる。
◎
The current iteration index beginning with zero for the first iteration.
</dd>
	<dd>
ほとんどの事例では，これは（正な）整数になるが、［
所要時間 0 にされ，無限~回 繰返す~animation
］用には，値は正な無限大にされる。
◎
In most cases this will be a (positive) integer. However, for a zero-duration animation that repeats infinite times, the value will be positive Infinity.
</dd>
	<dd>
時刻に対する`未解決$と同じく，`現在の反復~index$に対する未解決は ~NULL 値で表現される。
【！＊ε 】
◎
As with unresolved times, an unresolved current iteration is represented by a null value.
</dd>
</dl>

			</section>
		</section>
		<section id="the-keyframeeffect-interface">
<h3 title="The KeyframeEffect interface">6.6. `KeyframeEffect^I ~interface</h3>

<p>
`~keyframe効果$は `KeyframeEffect$I ~interfaceにより表現される。
◎
Keyframe effects are represented by the KeyframeEffect interface.
</p>

<pre class="idl">
[`Exposed$=Window]
interface `KeyframeEffect@I : `AnimationEffect$I {
  `KeyframeEffect$mc(
      `Element$I? %target,
      `object$? %keyframes,
      optional (`unrestricted double$ or `KeyframeEffectOptions$I) %options = {}
  );
  `constructor＠#dom-keyframeeffect-keyframeeffect-source$(`KeyframeEffect$I %source);

  attribute `Element$I? `target$m;
  attribute `CSSOMString$? `pseudoElement$m;
  attribute `CompositeOperation$I `composite$m;
  `sequence$&lt;`object$&gt; `getKeyframes$m();
  `undefined$ `setKeyframes$m(`object$? %keyframes);
};
</pre>

<dl class="idl-def">
	<dt>
`KeyframeEffect(target, keyframes, options)@m0
◎
KeyframeEffect (target, keyframes, options)
</dt>
	<dd class="algo">
<p>
構築子~手続きは：
◎
Creates a new KeyframeEffect object using the following procedure:
• Create a new KeyframeEffect object, effect.
</p>
		<ol>
			<li>
コレの`~target要素$ ~SET %target
◎
Set the target element of effect to target.
</li>
			<li>
コレの`~target疑似-選択子$ ~SET ~NULL
◎
↓</li>
			<li>
~IF［
%options は `KeyframeEffectOptions$I ~objである
］
⇒
コレの`pseudoElement$m 設定子~手続き( %options[ "`pseudoElement$m1" ] )
◎
Set the target pseudo-selector to the result corresponding to the first matching condition below:
◎
If options is a KeyframeEffectOptions object with a pseudoElement property,
• Set the target pseudo-selector to the value of the pseudoElement property.
◎
When assigning this property, the error-handling defined for the pseudoElement setter on the interface is applied. If the setter requires an exception to be thrown, this procedure must throw the same exception and abort all further steps.
◎
Otherwise,
• Set the target pseudo-selector to null.
</li>
			<li>
%計時~入力 ~SET %options
◎
Let timing input be the result corresponding to the first matching condition below:
◎
If options is a KeyframeEffectOptions object,
• Let timing input be options.
</li>
			<li>
~IF［
%options は `KeyframeEffectOptions$I ~objでない（ `double^c 型である）
］
⇒＃
%計時~入力 ~SET 新たな `EffectTiming$I ~obj（各~memberはそれぞれの既定~値に設定される）；
%計時~入力 の `duration$m1 ~SET %options
◎
Otherwise (if options is a double),
• Let timing input be a new EffectTiming object with all members set to their default values and duration set to options.
</li>
			<li>
`~animation効果の計時~propを更新する$( コレ, %計時~入力 )
（例外が投出され得る）
◎
Call the procedure to update the timing properties of an animation effect of effect from timing input.
◎
If that procedure causes an exception to be thrown, propagate the exception and abort this procedure.
</li>
			<li>
~IF［
%options は `KeyframeEffectOptions$I ~objである
］
⇒
コレの`composite$m 設定子~手続き( %options[ "`composite$m1" ] )
◎
If options is a KeyframeEffectOptions object, assign the composite property of effect to the corresponding value from options.
◎
When assigning this property, the error-handling defined for the corresponding setter on the KeyframeEffect interface is applied. If the setter requires an exception to be thrown for the value specified by options, this procedure must throw the same exception and abort all further steps.
</li>
			<li>
コレ用の`~keyframe$が成す集合を，［
%keyframes に
`§ ~keyframes引数の処理-法$
を適用した結果
］で初期化する
【！setKeyframes()$m 用に定義される手続-( keyframes )】
◎
Initialize the set of keyframes by performing the procedure defined for setKeyframes() passing keyframes as the input.
</li>
		</ol>
	</dd>

	<dd class="parameters">
%target 引数は`~target要素$を与える。
また，特定の要素を~targetにしない~animation用には、
~NULL にされてヨイ。
◎
Element? target
• The target element. This may be null for animations that do not target a specific element.
</dd>
	<dd>
%keyframes 引数は、
利用する`~keyframe$の集合を与える。
この引数の形式と処理は、
`§ ~keyframes引数の処理-法$
にて定義される。
◎
object? keyframes
• The set of keyframes to use. The format and processing of this argument is defined in § 6.6.3 Processing a keyframes argument.
</dd>
	<dd>
%options 引数は、
当の効果の［
`反復~所要時間$を指定する実数, または
計時と挙動を指定する~propたちが成す~collection
］を与える。
◎
optional KeyframeEffectOptions options
• Either a number specifying the iteration duration of the effect, or a collection of properties specifying the timing and behavior of the effect.
</dd>
	<dd>
この構築子の用法~例は、
<a href="#creating-a-new-keyframeeffect-object">§ 新たな `KeyframeEffect^I ~objの作成-法</a>
に与えられる。
◎
Examples of the usage of this constructor are given in § 6.6.1 Creating a new KeyframeEffect object.
</dd>

	<dt>
<dfn id="dom-keyframeeffect-keyframeeffect-source">`KeyframeEffect(source)^m</dfn>
◎
KeyframeEffect (source)
</dt>
	<dd>
%source と同じ~propたちを伴う，新たな `KeyframeEffect$I ~objを作成する。
◎
Creates a new KeyframeEffect object with the same properties as source＼
</dd>
	<dd class="algo">
<p>
構築子~手続きは：
◎
using the following procedure:
• Create a new KeyframeEffect object, effect.
</p>
		<ol>
			<li>
コレの［
次に挙げる各~prop
］ ~SET %source の対応する~prop
⇒＃
`効果~target$,
`~keyframe$,
`組成-演算~型$
◎
Set the following properties of effect using the corresponding values of source:
• effect target,
• keyframes,
• composite operation, and
</li>
			<li>
コレの［
次に挙げる各~計時~prop
］ ~SET %source に指定された対応する~prop
⇒＃
`開始-遅延$,
`終止-遅延$,
`延伸~mode$,
`反復~始端$,
`反復~回数$,
`反復~所要時間$,
`再生~方向$,
`~easing関数$
◎
all specified timing properties:
• start delay,
• end delay,
• fill mode,
• iteration start,
• iteration count,
• iteration duration,
• playback direction, and
• easing function.
</li>
		</ol>
	</dd>
	<dd class="note">注記：
`KeyframeEffect(target, keyframes, options)$m0
構築子と違って、
例外は投出されない
— %~source 上に指定されている どの計時~propも妥当と見做せるので。
◎
Note: Unlike the KeyframeEffect(target, keyframes, options) constructor, we do not need to re-throw exceptions since the timing properties specified on source can be assumed to be valid.
</dd>
	<dd class="parameters">
%source 引数は、
新たな`~keyframe効果$を定義する各種~propの複製-元になる`~keyframe効果$を与える。
◎
KeyframeEffect source
• The keyframe effect from which to copy the properties that define the new keyframe effect.
</dd>

	<dt>
`target@m
◎
target, of type Element, nullable
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`~target要素$【！(either the effect target...)】
◎
The target element being animated by this object (either the effect target if it is an Element or its originating element if it is a pseudo-element).＼
</dd>
	<dd>
結果は ~NULL になる場合もある
— ~audio~APIを利用して音響を生産する~animationなど，
特定の要素を~targetにしない~animation用には。
◎
This may be null for animations that do not target a specific element such as an animation that produces a sound using an audio API.
</dd>

	<dt>
`pseudoElement@m
◎
pseudoElement, of type CSSOMString, nullable
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`効果~target$に応じて
⇒＃
疑似要素であるならば その`~target疑似-選択子$（例： `before^pe ）／
~ELSE_ ~NULL
◎
The target pseudo-selector. null if this effect has no effect target or if the effect target is an element (i.e. not a pseudo-element). When the effect target is a pseudo-element, this specifies the pseudo-element selector (e.g. ::before).
</dd>
	<dd class="algo">
設定子~手続きは
⇒
コレの`効果~target$【！`~animation効果$】の`~target疑似-選択子$ ~SET `疑似要素~名を構文解析する$( 所与の値 )
【`効果~target$ ~EQ ~NULL の場合が述べられていない】
◎
On setting, sets the target pseudo-selector of the animation effect to the result of＼
</dd>
	<dd class="algo">
<p>
`疑似要素~名を構文解析する@
~algoは、
所与の( %値 )
に対し：
◎
pseudo-element parsing on the provided value, defined as the following:
• Given the value value, perform the following steps:
</p>
		<ol>
			<li>
<p>
~IF［
%値 ~NEQ ~NULL
］~AND［
%値 は無効な `pseudo-element-selector$t である
］
⇒
~THROW `SyntaxError$E
◎
If value is not null and is an invalid &lt;pseudo-element-selector&gt;,
• Throw a DOMException with error name "SyntaxError".
• Abort.
• Note: In effect, this means that if the result of this algorithm is used to set a variable, then that variable remains unchanged.
</p>

<p class="note">注記：
この文脈における無効は、
`無効な選択子$ `SELECTORS-4$r の定義に従う。
構文上は無効な疑似要素に加え，
~UAが実用~levelで~supportしない疑似要素も無効と判断される。
◎
Note: Invalid in this context follows the definition of an invalid selector defined in [SELECTORS-4] such that syntactically invalid pseudo-elements as well as pseudo-elements for which the user agent has no usable level of support are both deemed invalid.
</p>
			</li>
			<li>
~IF［
%値 ~IN { `:before^l, `:after^l, `:first-letter^l, `:first-line^l }
（ %値 は旧来の構文による疑似要素~名である）
］
⇒
%値 の先頭に `:^l を付加する
◎
If value is one of the legacy Selectors Level 2 single-colon selectors (':before', ':after', ':first-letter', or ':first-line'), then return the equivalent two-colon selector (e.g. '::before').
</li>
			<li>
~RET %値
◎
Otherwise, return value.
</li>
		</ol>
	</dd>

	<dt>
`composite@m
◎
composite, of type CompositeOperation
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET ［
`効果~stack$と組成するときに利用される，コレの`組成-演算~型$
］に対応する
`CompositeOperation$I 列挙~値
◎
The composite operation used to composite this keyframe effect with the effect stack, as specified by one of the CompositeOperation enumeration values.
</dd>
	<dd class="algo">
設定子~手続きは
⇒
コレの`組成-演算~型$ ~SET 所与の値に対応するそれ
◎
On setting, sets the composite operation property of this animation effect to the provided value.
</dd>
	<dt>
`getKeyframes()@m
◎
sequence&lt;object&gt; getKeyframes()
</dt>
	<dd>
コレを成している一連の~keyframeを返す
— それぞれに`算出d~keyframe~offset$を伴わせて。
◎
Returns the keyframes that make up this effect along with their computed keyframe offsets.
</dd>
	<dd class="informative">
◎非規範的

<p>
この~methodの結果は、
次の形式による~objたちが成す連列になる：
◎
The result of this method is a sequence of objects of the following format:
</p>

<pre class="idl">
dictionary ComputedKeyframe {
  /* <span class="comment">
無数の~propの［
名前, 値
］が成す~pair：
◎
... property-value pairs ...
i.e. DOMString propertyName
</span>
  DOMString propertyName1;
  DOMString propertyName2;
  ...
 */
  double?   offset = null;
  double    computedOffset;
  DOMString easing = "linear";
  `CompositeOperationOrAuto$I composite = "auto";
};
</pre>

<p>
各~memberの意味と値は、
次に従う：
◎
The meaning and values of each member is as follows:
</p>
		<dl class="idl-def">
			<dt>`offset^c</dt>
			<dd>
この`~keyframe$の`~keyframe~offset$を指定する［
~NULL または
閉区間 [0, 1] に入る実数
］になる。
◎
The keyframe offset of the keyframe specified as a number between 0.0 and 1.0 inclusive, or null.
</dd>
			<dd>
これは、
隣接する`~keyframe$の間隔が自動的に~~決定される場合には，
~NULL になる。
◎
This will be null if the keyframe is to be automatically spaced between adjacent keyframes.
</dd>

			<dt>`computedOffset^c</dt>
			<dd>
`欠落~keyframe~offsetを算出する$手続-を走らす一部として，この`~keyframe$用に計算された`算出d~keyframe~offset$になる。
◎
The computed keyframe offset for this keyframe calculated as part of running the compute missing keyframe offsets procedure.
</dd>
			<dd>
`offset^c ~memberと違って， ~NULL になることは決してない。
◎
Unlike the offset member, the computedOffset is never null.
</dd>

			<dt>`easing^c</dt>
			<dd>
`~easing関数$を与える
— ［
この~keyframeから次t~keyframeまでの，時刻の進捗
］を変形するために利用される。
◎
The easing function used to transform the progress of time from this keyframe until the next keyframe in the series.
</dd>

			<dt>`composite^c</dt>
			<dd>
`~keyframeに特有な組成-演算~型$を与える
— この~keyframe内に指定された各~値を`下層~値$と結合するために利用される。
◎
The keyframe-specific composite operation used to combine the values specified in this keyframe with the underlying value.
</dd>
			<dd>
この~memberは、
`~keyframe効果$に指定された`組成-演算~型$が利用されている場合には，
`~autoCO$l になる。
◎
This member will be auto if the composite operation specified on the keyframe effect is being used.
</dd>
		</dl>
	</dd>
	<dd class="algo">
<p>
`~keyframe$は［
現在の~Web~IDLでは表出-可能でない `partially open-ended^en 辞書~型
【固定的な何個かの~memberに加えて、名前が不定な不定個の~memberも有する型】
］により表現されるので、
この~methodの結果を準備するために利用する手続-は，
下に与える注釈文にて定義される：
◎
Since keyframes are represented by a partially open-ended dictionary type that is not currently able to be expressed with WebIDL, the procedure used to prepare the result of this method is defined in prose below:
</p>
		<ol>
			<li>
%結果 ~LET 空~連列
◎
Let result be an empty sequence of objects.
</li>
			<li>
%効果 ~LET この`~keyframe効果$
◎
↓</li>
			<li>
<p>
%~keyframe~list ~LET %効果 に応じて：
◎
Let keyframes be one of the following:
</p>
				<ol>
					<li>
［
%効果 は `CSSAnimation$I に`結付けられた効果$である
］~AND［
%効果 用の`~keyframe$たちは `setKeyframes()$m の~callにより成功裡に置換されたものでない
］ならば
⇒
%効果 用の`算出d~keyframe~list$
◎
If this keyframe effect is associated with a CSSAnimation, and its keyframes have not been replaced by a successful call to setKeyframes(),
• the computed keyframes for this keyframe effect.
</li>
					<li>
~ELSE_ `欠落~keyframe~offsetを算出する$( %効果 用の`~keyframe$たち )
◎
Otherwise,
• the result of applying the procedure compute missing keyframe offsets to the keyframes for this keyframe effect.
</li>
				</ol>

<p class="note">注記：
`~CSS~animation$i 用には`算出d~keyframe~list$を返す
— ~CSS内で指定された~keyframeには【 `ComputedKeyframe^I 】辞書で表現し得ないものがあるので。
◎
Note: We return computed keyframes for CSS Animations because not all keyframes specified in CSS can be represented by a dictionary.
</p>
			</li>
			<li>
<p>
%~keyframe~list 内の
~EACH( %~keyframe )
に対し：
◎
For each keyframe in keyframes perform the following steps:
</p>
				<ol>
					<li>
<p>
辞書~obj %出力~keyframe を初期化する
— 次の定義を利用して：
◎
Initialize a dictionary object, output keyframe, using the following definition:
</p>

<pre class="idl">
dictionary `BaseComputedKeyframe@I {
  `double$?   `offset@m = null;
  `double$    `computedOffset@m;
  `DOMString$ `easing@m = "linear";
  `CompositeOperationOrAuto$I `composite@m = "auto";
};
</pre>
					</li>
					<li>
%出力~keyframe の
⇒＃
`offset$m ~member ~SET %~keyframe の`~keyframe~offset$,
`computedOffset$m ~member ~SET %~keyframe の`算出d~keyframe~offset$,
`easing$m ~member ~SET %~keyframe の~keyframeに特有な`~easing関数$,
`composite$m ~member ~SET %~keyframe の`~keyframeに特有な組成-演算~型$に対応する `CompositeOperationOrAuto$I 列挙~値
◎
Set the offset, computedOffset, easing, and composite members of output keyframe to the respective keyframe offset, computed keyframe offset, keyframe-specific easing function, and keyframe-specific composite operation values of keyframe.
</li>
<!--
`KeyframeEffect^I0＊
 -->
					<li>
<p>
%~keyframe 内の~animation用の
~EACH( ~prop ( 名/値 ) ~pairが成す %宣言 )
に対し：
◎
For each animation property-value pair declaration in keyframe, perform the following steps:
</p>
						<ol>
							<li>
%~prop名 ~LET `~animation~prop名から~IDL属性~名を得る$( %宣言 の~prop名 )
◎
Let property name be the result of applying the animation property name to IDL attribute name algorithm to the property name of declaration.
</li>
							<li>
%~IDL値 ~LET `~CSS値を直列化する$( %宣言 )
`CSSOM$r
◎
Let IDL value be the result of serializing the property value of declaration by passing declaration to the algorithm to serialize a CSS value [CSSOM].
</li>
							<li>
%値 ~LET %~IDL値 を`~ES文字列~値に変換する＠~WEBIDLjs#DOMString-to-js$
◎
Let value be the result of converting IDL value to an ECMAScript String value.
</li>
							<li>
%出力~keyframe 上の `DefineOwnProperty$sl 内部~methodを~callする
— 次を渡して
⇒＃
~prop名 %~prop名,
~prop記述子 { [[Writable]]: `true^jv, [[Enumerable]]: `true^jv, [[Configurable]]: `true^jv, [[Value]]: %値 },
`Boolean^jc ~flag `false^jv
◎
Call the [[DefineOwnProperty]] internal method on output keyframe with property name property name, Property Descriptor { [[Writable]]: true, [[Enumerable]]: true, [[Configurable]]: true, [[Value]]: value } and Boolean flag false.
</li>
						</ol>
					</li>
					<li>
%結果 に %出力~keyframe を付加する
◎
Append output keyframe to result.
</li>
				</ol>
			</li>
			<li>
~RET %結果
◎
Return result.
</li>
		</ol>
	</dd>

	<dt>
`setKeyframes(keyframes)@m
◎
void setKeyframes(object? keyframes)
</dt>
	<dd>
コレを成している`~keyframe$の集合を，［
`§ ~keyframes引数の処理-法$
に従って， %keyframes 引数を処理した結果
］に置換する。
その手続-が例外を投出した場合、
この効果の`~keyframe$は改変されない。
◎
Replaces the set of keyframes that make up this effect.
◎
object? keyframes
• A series of keyframes whose format and processing is defined by § 6.6.3 Processing a keyframes argument.
◎
This effect’s set of keyframes is replaced with the result of performing the procedure to process a keyframes argument. If that procedure throws an exception, this effect’s keyframes are not modified.
</dd>
</dl>

			<section id="creating-a-new-keyframeeffect-object">
<h4 title="Creating a new KeyframeEffect object">6.6.1. 新たな `KeyframeEffect^I ~objの作成-法</h4>

<div class="informative">
◎非規範的

<p>注記：
`KeyframeEffect()$m0 構築子は、
新たな `KeyframeEffect$I ~objを作成するための，
いくつかの~approachを提供する。
◎
The KeyframeEffect constructor offers a number of approaches to creating new KeyframeEffect objects.
</p>

<div class="example">
<p>
最も単純な場合：
ある %elem の `left^p ~propを 3 秒かけて `100px^v へ変化させる `KeyframeEffect$I ~objは、
次のとおり構築できる：
◎
At its simplest, a KeyframeEffect object that changes the "left" property of elem to 100px over three seconds can be constructed as follows:
</p>

<pre class="lang-js">
var %effect = new KeyframeEffect(%elem, { left: '100px' }, 3000);
</pre>

</div>

<div class="example">
<p>
~keyframeたちが成す~listを表現している  2 個目の~parameterには、
複数の~propを指定できる
（ `§ ~keyframes引数の処理-法$
を見よ）。
◎
The second parameter, representing the list of keyframes, may specify multiple properties. (See § 6.6.3 Processing a keyframes argument.)
</p>

<p>
複数の~propを一括して指定する例：
◎
// Specify multiple properties at once
</p>

<pre class="lang-js">
var %effectA = new KeyframeEffect(%elem, { left: '100px', top: '300px' }, 3000);
</pre>

<p>
複数の~keyframeを指定する例：
◎
// Specify multiple keyframes
</p>

<pre class="lang-js">
var %effectB = new KeyframeEffect(%elem, [ { left: '100px' }, { left: '300px' } ], 3000);
</pre>

</div>

<div class="example">
<p>
3 個目の~parameterは、
~animationの計時を表現する
— それには、
単純に［
上のような`反復~所要時間$を表現する，~milli-秒による実数
］の他にも、
次のとおり `EffectTiming$I 辞書を利用して，`開始-遅延$などの他の計時~propを指定できる：
◎
The third parameter, representing the animation’s timing, may simply be a number representing the iteration duration in milliseconds as above, or, to specify further timing properties such as the start delay, an EffectTiming object can be used, as follows:
</p>

<pre class="lang-js">
var %effect = new KeyframeEffect(
    %elem,
    { left: '100px' },
    { duration: 3000, delay: 2000 }
);
</pre>

</div>

<div class="example">
<p>
所要時間 `duration^m が指定されなかった場合、
値 0 が利用される。
よって，次のとおり、
補間を伴わずに，単純に［
ある~propを設定する~animationを作成する
］こともアリである：
◎
If the duration is not specified, a value of zero is used. It is possible to create an animation that simply sets a property without any interpolation as follows:
</p>

<pre class="lang-js">
var %effect = new KeyframeEffect(
    %elem,
    { visibility: 'hidden' },
    { fill: 'forwards' }
);
</pre>

<p>
しかしながら，
`§ 延伸の挙動と延伸~mode＠~WANIM#fill-behavior$
にて述べたとおり、
この仕方で際限なく延伸する~animationは，
利用しないことが奨励される。
◎
As described in § 4.6.8 Fill behavior and fill modes however, using indefinitely filling animations in this way is discouraged.
</p>

</div>

<div class="example">
<p>
作成した `KeyframeEffect$I は、
`Animation()$m0 に与えた上で，
その~animationを `play()^m することにより再生できる。
しかしながら、
単純な効果~用には，これを自動的に遂行する
`Element.animate()＠#extensions-to-the-element-interface$c
で短絡する方が簡便になる
— 例えば：
◎
Having created a KeyframeEffect, it can be played by adding it to an Animation and then playing that animation. For simple effects, however, the Element.animate shortcut is more convenient since it performs these steps automatically. For example,
</p>

<pre class="lang-js">
%elem.animate({ left: '100px' }, 3000);
</pre>
</div>
</div>

			</section>
			<section id="property-name-conversion">
<h4 title="Property names and IDL names">6.6.2. ~prop名と~IDL名</h4>

<div class="algo">
<p>
`~animation~prop名から~IDL属性~名を得る@
~algoは、
所与の
( 文字列 %~prop名 )
に対し：
◎
The animation property name to IDL attribute name algorithm for property is as follows:
</p>

<ol>
	<li>
~IF［
%~prop名 は `custom-property-name$t 生成規則に合致する
］
⇒
~RET %~prop名
◎
If property follows the &lt;custom-property-name&gt; production, return property.
</li>
	<li>
~IF［
%~prop名 ~EQ "`float$p"
］
⇒
~RET `cssFloat^l
◎
If property refers to the CSS float property, return the string "cssFloat".
</li>
	<li>
~IF［
%~prop名 ~EQ "`offset$p"
］
⇒
~RET `cssOffset^l
◎
If property refers to the CSS offset property, return the string "cssOffset".
</li>
	<li>
~RET `~CSS~prop名から~IDL属性~名を得る$( %~prop名 )
`CSSOM$r
◎
Otherwise, return the result of applying the CSS property to IDL attribute algorithm [CSSOM] to property.
</li>
</ol>
</div>

<div class="algo">
<p>
`~IDL属性~名から~animation~prop名を得る@
~algoは、
所与の
( 文字列 %属性~名 )
に対し：
◎
The IDL attribute name to animation property name algorithm for attribute is as follows:
</p>

<ol>
	<li>
~IF［
%属性~名 は `custom-property-name$t 生成規則に合致する
］
⇒
~RET %属性~名
◎
If attribute conforms to the &lt;custom-property-name&gt; production, return attribute.
</li>
	<li>
~IF［
%属性~名 ~EQ `cssFloat^l
］
⇒
~RET "`float$p"
◎
If attribute is the string "cssFloat", then return an animation property representing the CSS float property.
</li>
	<li>
~IF［
%属性~名 ~EQ `cssOffset^l
］
⇒
~RET "`offset$p"
◎
If attribute is the string "cssOffset", then return an animation property representing the CSS offset property.
</li>
	<li>
~RET `~IDL属性~名から~CSS~prop名を得る$( %属性~名 )
`CSSOM$r
◎
Otherwise, return the result of applying the IDL attribute to CSS property algorithm [CSSOM] to attribute.
</li>
</ol>
</div>

			</section>
			<section id="processing-a-keyframes-argument">
<h4 title="Processing a keyframes argument">6.6.3. %keyframes 引数の処理-法</h4>

<div class="informative">
◎非規範的

<p>
次のどの~methodも引数として~keyframeの集合を受容する
⇒＃
`KeyframeEffect()$m0 構築子,
`KeyframeEffect$I ~interface上の `setKeyframes()$m1,
`Animatable$I ~interface~mixinの `animate()$m1
◎
The following methods all accept a set of keyframes as an argument:
• the KeyframeEffect(target, keyframes, options) constructor,
• the setKeyframes() method on the KeyframeEffect interface,
• the animate() method of the Animatable interface mixin.
</p>

<p>
この引数は、
下に示すような 2 種の形で指定できる：
◎
This argument can be specified in the one of two forms as illustrated below:
</p>

<div class="example">
<p>
次の 2 つの式は同じ結果を生産する：
◎
// The following two expressions produce the same result:
</p>

<pre class="lang-js">
%elem.animate([
    { color: 'blue' },
    { color: 'green' },
    { color: 'red' },
    { color: 'yellow' }
], 2000);

%elem.animate({ color: [ 'blue', 'green', 'red', 'yellow' ] }, 2000);
</pre>

<p>
同様に、
次の 2 つの［
複数~propからなる~animation
］用の式も等価になる：
◎
// Likewise, for a multi-property animation, the following two expressions are equivalent:
</p>

<pre class="lang-js">
%elem.animate([
    { color: 'blue', left: '0px' },
    { color: 'green', left: '-20px' },
    { color: 'red', left: '100px' },
    { color: 'yellow', left: '50px'}
], 2000);

%elem.animate({
    color: [ 'blue', 'green', 'red', 'yellow' ],
    left: [ '0px', '-20px', '100px', '50px' ]
}, 2000);
</pre>

<p>
ついでに、
次の 3 つの式も互いに等価になる：
◎
// Incidentally, the following three expressions are all equivalent:
</p>

<pre class="lang-js">
%elem.animate([
    { color: 'red' }
], 1000);

%elem.animate({ color: [ 'red' ] }, 1000);

%elem.animate({ color: 'red' }, 1000);
</pre>
</div>

<p>
1 種目の形（配列~形）は，~keyframeたちが成す配列からなり、
各~keyframeには，各~animation用~propごとに
1 個~以下の値を指定できる。
2 種目の形（~obj形）は、
1 個の~objからなり，各~animation用~propには［
単独の~animation値／~animation値の配列
］を指定できる。
◎
The first form (the array-form) consists of an array of keyframes where each keyframe may specify at most one value per animation property. The second form (the object-form) consists of an object where each animation property may specify a single animation value or an array of animation values.
</p>

<p>
1 種目の配列~形が，正準的な形とされ、
`KeyframeEffect$I の `getKeyframes()$m1 ~methodが返す形である。
◎
The first array-form is the canonical form, and is the form returned by the getKeyframes() method.
</p>

<p>
`~keyframe~offset$は、
下に示すように どちらの形でも指定できる：
◎
Keyframe offsets can be specified using either form as illustrated below:
</p>

<div class="example">
<p>
~offsetを伴わない~keyframeの~offsetは、
自動的に算出される
— 次の例の［
1, 3, 5
］個目の~keyframeは，順に［
0, 0.65, 1
］になる：
◎
The keyframes without offsets will automatically have offsets computed as 0 for the first keyframe, 0.65 for the middle keyframe, and 1 for the final keyframe.
</p>

<pre class="lang-js">
%elem.animate([
    { color: 'blue' },
    { color: 'green', offset: 0.5 },
    { color: 'red' },
    { color: 'yellow', offset: 0.8 },
    { color: 'pink' }
], 2000);
</pre>

<p>
次の例は、
上と同じ結果を生産する。
最後の値を指定する必要はないことに注意
— それは自動的に ~NULL と扱われ、
前の事例と同じく，自動的にアテガわれることになる。
◎
The following produces the same result. Note that it is not necessary to specify the last value: it will automatically be treated as 'null' and then the automatic assignment will apply as with the previous case.
</p>

<pre class="lang-js">
%elem.animate({
    color: [ 'blue', 'green', 'red', 'yellow', 'pink' ],
    offset: [ null, 0.5, null, 0.8 ]
}, 2000);
</pre>
</div>

<p>
同様に［
`~easing関数$ ／ `~keyframeに特有な組成-演算~型$
］も，どちらの形で指定されてもヨイ。
配列~形では、
各`~keyframe$ごとに異なる値を指定することが許容される。
一方で，~obj形では、
値の~listは
— 各~keyframeに値がアテガわれるまで，必要に応じて —
繰返されることになる。
◎
Likewise easing functions and keyframe-specific composite operations may be specified in either form. The array-form allows specifying different values for each keyframe whilst for the object-form, the list of values will be repeated as needed until each keyframe has been assigned a value.
</p>

<div class="example">
<p>
~easing関数は，連続する 2 つの~keyframeの`合間に^em適用されるので、
最後の~keyframe上に~easing関数を指定しても，無視されることになる。
次の 2 つは、
同じ結果を生産する：
◎
// Since easing functions apply _between_ keyframes, even if we specify an easing function on the last keyframe it will be ignored.
</p>

<pre class="lang-js">
%elem.animate([
    { color: 'blue', easing: 'ease-in' },
    { color: 'green', easing: 'ease-out' },
    { color: 'yellow' }
], 2000);
<span lang="en" class="_en">// The following produces the same result.</span>
%elem.animate({
    color: [ 'blue', 'green', 'yellow' ],
    easing: [ 'ease-in', 'ease-out' ]
}, 2000);
</pre>

<p>
次のものには、
繰返しの挙動により，どの~keyframeにも単純に同じ値がアテガわれる：
◎
// The repeating behavior makes assigning the same value to all keyframes simple:
</p>

<pre class="lang-js">
%elem.animate({
    color: [ 'blue', 'green', 'yellow' ],
    easing: 'ease-in-out'
}, 2000);
</pre>
</div>

<p>
どちらの形でも、
`easing^c ~propは`~keyframeに特有^emな`~easing関数$を設定することに注意。
これは、
`EffectTiming$I ~objを利用して指定された`~easing関数$からは独立になる
— 後者の~easing関数は、
`~keyframe効果$の`反復~所要時間$全体に適用される。
【！KeyframeEffectOptions object (or ...).】
◎
Note that the easing property in either form sets the keyframe-specific easing function. This is independent from the easing function that applies to the entire iteration duration of the keyframe effect as specified using a KeyframeEffectOptions object (or KeyframeAnimationOptions object when using the animate() method of the Animatable interface mixin).
</p>

<p>
次の例の 2 つの文は、
異なる結果を生産する：
◎
In the following example, the two statements produce different results.
</p>

<div class="example">
<p>
ここでは、
各~色~値の合間に `ease-in-out^v が適用される：
◎
Here, 'ease-in-out' is applied between each color value.
</p>

<pre class="lang-js">
%elem.animate({
    color: [ 'blue', 'green', 'yellow' ],
    easing: 'ease-in-out'
}, 2000);
</pre>

<p>
一方，次の事例では、
~animation全体にかけて
— すなわち、
`blue^v から `yellow^v にかけて —
`ease-in-out^v が適用される。
◎
// However, in this case, 'ease-in-out' is applied across the whole span of the animation, that is from 'blue' to 'yellow'.
</p>

<pre class="lang-js">
%elem.animate(
    { color: [ 'blue', 'green', 'yellow' ] },
    { duration: 2000, easing: 'ease-in-out' }
);
</pre>
</div>

<p>
%keyframes 引数の型は、
`partially open-ended^en 辞書~型に依拠するので，
~Web~IDLでは表出できない。
◎
The type of the keyframes argument cannot be expressed in WebIDL since it relies on a partially-open dictionary type.
</p>

<p>
この引数の型は、
概念的には，~Web~IDLの “様な” 次の定義に等価になる：
◎
Conceptually, the type of this argument is equivalent to the following WebIDL-like definition:
</p>

<pre class="idl">
dictionary Keyframe {
  /* <span class="comment">
無数の~propの［
名前, 値
］が成す~pair：
◎
... property-value pairs ...
i.e. DOMString propertyName
</span> 
  DOMString propertyName1;
  DOMString propertyName2;
  ...
*/
  double?   offset = null;
  DOMString easing = "linear";
  `CompositeOperationOrAuto$I  composite = "auto";
};

dictionary PropertyIndexedKeyframes {
  /* <span class="comment">
無数の~propの［
名前, 値~list
］が成す~pair：
◎
... property-value and property-valuelist pairs ...
i.e. (DOMString or sequence&lt;DOMString&gt;) propertyName
</span> 
  (DOMString or sequence&lt;DOMString&gt;) propertyName1;
  (DOMString or sequence&lt;DOMString&gt;) propertyName2;
  ...
*/
  (double? or sequence&lt;double?&gt;)     offset = [];
  (DOMString or sequence&lt;DOMString&gt;) easing = [];
  (`CompositeOperationOrAuto$I or sequence&lt;`CompositeOperationOrAuto$I&gt;) composite = [];
};

typedef (sequence&lt;Keyframe?&gt; or PropertyIndexedKeyframes) KeyframeArgument;
</pre>

<p>
`KeyframeArgument^I を成す~memberの意味と許容される値は、
次に従う：
◎
The meaning and allowed values of each argument is as follows:
</p>

<dl class="idl-def">
	<dt>`offset^m</dt>
	<dd>
当の`~keyframe$の`~keyframe~offset$を与える
— 閉区間 [0, 1] に入る実数, または ~NULL を指定する。
◎
The keyframe offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null.
</dd>
	<dd>
値 ~NULL は、
隣接する`~keyframe$の間隔を自動的に~~決定するべきであることを指示する。
◎
A null value indicates that the keyframe should be automatically spaced between adjacent keyframes.
</dd>
	<dd>
閉区間 [0, 1] の外側にある~offsetを指定した場合、
`TypeError^E が投出される。
◎
Specifying an offset outside the range [0.0, 1.0] will cause a TypeError to be thrown.
</dd>
	<dd>
~offsetを指定している~keyframeは、
~offsetの昇順に供されなければナラナイ
— 隣接する複数の~keyframeの~offsetは、
等しくされていてもよい。
◎
Keyframes that specify an offset must be provided in increasing order of offset. Adjacent and equal offsets, however, are permitted.
</dd>

	<dt>`easing^m</dt>
	<dd>
`~easing関数$を与える
— ［
~keyframeから次t~keyframeまでの，時刻の進捗
］を変形するときに利用される。
◎
The easing function used to transform the progress of time from this keyframe until the next keyframe in the series.
</dd>
	<dd>
この文字列の構文解析-法に結付けられる構文と~errorの取扱いは、
`EffectTiming$I ~interfaceの `easing$m1 属性~用に定義されるものに一致する。
◎
The syntax and error-handling associated with parsing this string is identical to that defined for the easing attribute of the EffectTiming interface.
</dd>

	<dt>`composite^m</dt>
	<dd>
`~keyframeに特有な組成-演算~型$を与える
— ~keyframe内に指定された各~値を`下層~値$に結合するときに利用される。
◎
The keyframe-specific composite operation used to combine the values specified in this keyframe with the underlying value.
</dd>
	<dd>
`~autoCO$l を与えた場合、
当の`~keyframe$が属する`~keyframe効果$上に指定された`組成-演算~型$が利用されることになる。
◎
If auto, the composite operation specified on the keyframe effect will be used.
</dd>
</dl>

<p>
この型は，~Web~IDLでは表出できないので、
その処理は，以下に与える注釈文で定義される。
◎
Since this type cannot be expressed in WebIDL, its processing is defined in prose following.
</p>
</div>

<p>
%keyframes 引数とる各種~methodは、
その引数を入力に`~keyframes引数を処理する$手続-を走らせて，
その結果を維持する。
◎
For each method that takes a keyframes argument, the procedure to process a keyframes argument is run on the input and the result of that procedure is retained.
</p>

<p>
最初に 2 つの~support用の定義を定義する：
◎
First we define two supporting definitions:
</p>

<div class="algo">
<p>
`完了~recordを検査する@
~algoは、
所与の
( ~ES演算を~callして得られた`完了~record$ %結果 )
に対し：
◎
The instruction, check the completion record of result, where result is a completion record from calling an ECMAScript operation, is equivalent to the following steps:
</p>

<ol>
	<li>
<p>
~IF［
%結果 は`中途完了$である
］
⇒
~THROW ［
%結果 の `value^sl ~fieldが包含する例外
］
◎
If result is an abrupt completion, throw the exception contained in the [[value]] field of result and abort the procedure.
</p>

<p class="issue">
`type^sl ~IN { `break^jv, `continue^jv, `return^jv }
の場合に何をするべきか？
◎
What should we do if the [[type]] is break, continue, or return? Can it be?
</p>
	</li>
	<li>
~RET %結果 の `value^sl ~field値
◎
Replace result with the value contained in the [[value]] field of result.
</li>
</ol>
</div>

<div class="algo">
<p>
`~keyframeに類する~objを処理する@
~algoは、
所与の
( ~ES~obj %~keyframe入力, %~listを許容するか ~IN { `~listを許容する^i, ε }（省略時は ε ）)
に対し，
各~prop名を［
%~listを許容するか に応じて［
ε ならば `DOMString^I 値／
`~listを許容する^i ならば 0 個以上の `DOMString^I 値が成す連列
］］に対応付ける~mapを返す：
◎
The procedure to process a keyframe-like object takes two arguments:
• an ECMAScript object, keyframe input, and
• an allow lists boolean flag
◎
and returns a map from either property names to DOMString values if allow lists is false, or from property names to sequences of DOMString values otherwise, using the following procedure:
</p>

<ol>
	<li>
<p>
%型 ~LET %~listを許容するか に応じて
⇒＃
`~listを許容する^i ならば `BasePropertyIndexedKeyframe$I ／
ε ならば `BaseKeyframe$I 
◎
Run the procedure to convert an ECMAScript value to a dictionary type [WEBIDL] with keyframe input as the ECMAScript value, and the dictionary type depending on the value of the allow lists flag as follows:
◎
If allow lists is true,
• Use the following dictionary type:
</p>

<pre class="idl">
dictionary `BasePropertyIndexedKeyframe@I {
  (`double$? or `sequence$&lt;`double$?&gt;) `offset@m = [];
  (`DOMString$ or `sequence$&lt;`DOMString$&gt;) `easing@m = [];
  (`CompositeOperationOrAuto$I or `sequence$&lt;`CompositeOperationOrAuto$I&gt;) `composite@m = [];
};
</pre>

<p>
◎
Otherwise,
• Use the following dictionary type:
</p>

<pre class="idl">
dictionary `BaseKeyframe@I {
  `double$?   `offset@m = null;
  `DOMString$ `easing@m = "linear";
  `CompositeOperationOrAuto$I `composite@m = `auto^l;
};
</pre>

	</li>
	<li>
%~keyframe出力 ~LET `~ES値から辞書~型に変換する$( %~keyframe入力, %型 )
`WEBIDL$r
◎
Store the result of this procedure as keyframe output.
</li>
	<li>
%~animate可能な~propたち ~LET ［
~UAが~animate可能な，すべての~prop
］に対する［
`~animation~prop名から~IDL属性~名を得る$( 各~propの名前 )
］の結果からなる集合
— これらには、
下位propに~animate可能なものを含む略式~propも含まれるとする
◎
Build up a list of animatable properties as follows:
• Let animatable properties be a list of property names (including shorthand properties that have longhand sub-properties that are animatable) that can be animated by the UA.
• Convert each property name in animatable properties to the equivalent IDL attribute by applying the animation property name to IDL attribute name algorithm.
</li>
	<li>
<p>
`EnumerableOwnNames$jA( %~keyframe入力 ) の結果を成す
~EACH( %~prop名 )
に対し，~Unicode符号位置に基づく昇順に：
◎
Let input properties be the result of calling the EnumerableOwnNames operation with keyframe input as the object.
◎
Make up a new list animation properties that consists of all of the properties that are in both input properties and animatable properties, or which are in input properties and conform to the &lt;custom-property-name&gt; production.
◎
Sort animation properties in ascending order by the Unicode codepoints that define each property name.
◎
For each property name in animation properties:
</p>
		<ol>
			<li>
~IF［
%~prop名 は `custom-property-name$t 生成規則に合致しない
］~AND［
%~prop名 ~NIN %~animate可能な~propたち
］
⇒
~CONTINUE
◎
↑</li>
			<li>
%生の値 ~LET %~keyframe入力 上で 
`Get$sl( %~prop名, %~keyframe入力 )
を~callした結果
◎
Let raw value be the result of calling the [[Get]] internal method on keyframe input, with property name as the property key and keyframe input as the receiver.
</li>
			<li>
%生の値 ~SET `完了~recordを検査する$( %生の値 )
◎
Check the completion record of raw value.
</li>
			<li>
<p>
~IF［
%~listを許容するか ~EQ `~listを許容する^i
］：
◎
Convert raw value to a DOMString or to a sequence of DOMStrings property values as follows:
◎
If allow lists is true,
</p>
				<ol>
					<li>
%~prop値たち ~LET `~IDL値に変換する$( %生の値, `(DOMString or sequence&lt;DOMString&gt;)^c )
`WEBIDL$r
◎
Let property values be the result of converting raw value to IDL type (DOMString or sequence&lt;DOMString&gt;) using the procedures defined for converting an ECMAScript value to an IDL value [WEBIDL].
</li>
					<li>
~IF［
%~prop値たち は `DOMString^I 型である
］
⇒
%~prop値たち ~SET %~prop値たち のみからなる新たな `sequence&lt;DOMString&gt;^c 型の値
◎
If property values is a single DOMString, replace property values with a sequence of DOMStrings with the original value of property values as the only element.
</li>
				</ol>
			</li>
			<li>
~ELSE
⇒
%~prop値たち ~SET `DOMString^I 型の値に`変換する＠~WEBIDLjs#js-to-DOMString$( %生の値 )
`WEBIDL$r
◎
Otherwise,
• Let property values be the result of converting raw value to a DOMString using the procedure for converting an ECMAScript value to a DOMString [WEBIDL].
</li>
			<li>
%正規化-済み~prop名 ~LET `~IDL属性~名から~animation~prop名を得る$( %~prop名 )
◎
Calculate the normalized property name as the result of applying the IDL attribute name to animation property name algorithm to property name.
</li>
			<li>
%~keyframe出力[ %正規化-済み~prop名 ] ~SET %~prop値たち
◎
Add a property to keyframe output with normalized property name as the property name, and property values as the property value.
</li>
		</ol>
	</li>
	<li>
~RET %~keyframe出力
◎
Return keyframe output.
</li>
</ol>
</div>

<div class="algo">
<p>
`~keyframes引数を処理する@
~algoは、
所与の
( ~nullableな~ES~obj %~obj )
に対し，`~keyframe$たちが成す連列を返す：
◎
The procedure to process a keyframes argument takes a nullable ECMAScript object, object, as input, and returns a sequence of keyframes using the following procedure:
</p>
<ol>
	<li>
~IF［
%~obj ~EQ ~NULL
］
⇒
~RET 空~連列
◎
If object is null, return an empty sequence of keyframes.
</li>
	<li>
%対象~keyframe~list ~LET 空~連列
◎
Let processed keyframes be an empty sequence of keyframes.
</li>
	<li>
%~method ~LET `完了~recordを検査する$( `GetMethod$jA( %~obj, <a href="~ES6#sec-well-known-symbols"><code class="js-value">@@iterator</code></a> ) )
◎
Let method be the result of GetMethod(object, @@iterator).
◎
Check the completion record of method.
</li>
	<li>
<p>
~IF［
%~method ~NEQ `undefined^jv
］：
◎
Perform the steps corresponding to the first matching condition below:
◎
If method is not undefined,
</p>
		<ol>
			<li>
%反復子 ~LET `GetIterator$jA( %~obj, %~method )
◎
Let iter be GetIterator(object, method).
</li>
			<li>
%反復子 ~SET `完了~recordを検査する$( %反復子 )
◎
Check the completion record of iter.
</li>
			<li>
<p>
~WHILE 無条件：
◎
Repeat:
</p>
				<ol>
					<li>
%次t ~LET `IteratorStep$jA( %反復子 )
◎
Let next be IteratorStep(iter).
</li>
					<li>
%次t ~SET `完了~recordを検査する$( %次t )
◎
Check the completion record of next.
</li>
					<li>
~IF［
%次t ~EQ ~F
］
⇒
~BREAK
◎
If next is false abort this loop.
</li>
					<li>
%次t~item ~LET `IteratorValue$jA( %次t )
◎
Let nextItem be IteratorValue(next).
</li>
					<li>
%次t~item ~SET `完了~recordを検査する$( %次t~item )
◎
Check the completion record of nextItem.
</li>
					<li>
~IF［
`Type$jA( %次t~item ) ~NIN { `Undefined^jc, `Null^jc, `Object^jc }
］
⇒
~THROW `TypeError^E
◎
If Type(nextItem) is not Undefined, Null or Object, then throw a TypeError and abort these steps.
</li>
					<li>
%対象~keyframe~list に次の結果を付加する
⇒
`~keyframeに類する~objを処理する$( %次t~item )
◎
Append to processed keyframes the result of running the procedure to process a keyframe-like object passing nextItem as the keyframe input with the allow lists flag set to false.
</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>
<p>
~ELSE：
◎
Otherwise,
</p>
		<ol>
			<li>
%~keyframe~map ~LET `~keyframeに類する~objを処理する$( %~obj, `~listを許容する^i )
◎
Let property-indexed keyframe be the result of running the procedure to process a keyframe-like object passing object as the keyframe input with the allow lists flag set to true.
</li>
			<li>
<p>
%~keyframe~map を成す
~EACH( %~prop名 → %~prop値たち )
に対し：
◎
For each member, m, in property-indexed keyframe, perform the following steps:
</p>
				<ol>
					<li>
~IF［
%~prop名 ~IN { `composite^l, `easing^l, `offset^l }
］
⇒
~CONTINUE
◎
Let property name be the key for m.
◎
If property name is "composite", "easing", or "offset", skip the remaining steps in this loop and continue from the next member in property-indexed keyframe after m.
◎
Let property values be the value for m.
</li>
					<li>
%~prop用の~keyframeたち ~LET 空~連列
◎
Let property keyframes be an empty sequence of keyframes.
</li>
					<li>
<p>
%~prop値たち 内の
~EACH( %値 )
に対し：
◎
For each value, v, in property values, perform the following steps:
</p>
						<ol>
							<li>
%~keyframe ~LET 新たな`~keyframe$
◎
Let k be a new keyframe with a null keyframe offset.
</li>
							<li>
%~keyframe の`~keyframe~offset$ ~SET ~NULL
</li>
							<li>
%~keyframe[ %~prop名 ] ~SET %値
◎
Add the property-value pair, property name → v, to k.
</li>
							<li>
%~prop用の~keyframeたち に %~keyframe を付加する
◎
Append k to property keyframes.
</li>
						</ol>
					</li>
					<li>
`欠落~keyframe~offsetを算出する$( %~prop用の~keyframeたち )
◎
Apply the procedure to compute missing keyframe offsets to property keyframes.
</li>
					<li>
%~prop用の~keyframeたち 内の
~EACH( ~keyframe )
に対し
⇒
%対象~keyframe~list に ~keyframe を追加する
◎
Add keyframes in property keyframes to processed keyframes.
</li>
				</ol>
			</li>
			<li>
%対象~keyframe~list を，各`~keyframe$の`算出d~keyframe~offset$による昇順に~sortする
◎
Sort processed keyframes by the computed keyframe offset of each keyframe in increasing order.
</li>
			<li>
%対象~keyframe~list 内の［
`算出d~keyframe~offset$が互いに等しい`~keyframe$たち
］を，一つに併合する
◎
Merge adjacent keyframes in processed keyframes when they have equal computed keyframe offsets.
</li>
			<li>
%~offsetたち ~LET ［
%~keyframe~map[ "`offset^m" ] は 連列~型であるならば それ ／
~ELSE_（ `double?^c 型） それのみからなる連列
］
◎
Let offsets be a sequence of nullable double values assigned based on the type of the offset member of the property-indexed keyframe as follows:
◎
sequence&lt;double?&gt;,
• The value of offset as-is.
◎
double?,
• A sequence of length one with the value of offset as its single item, i.e. « offset »,
</li>
			<li>
~EACH( %index ~IN { 0 〜 `min^op( %対象~keyframe~list の~size, %~offsetたち の~size ) ~MINUS 1 } )
に対し
⇒
%対象~keyframe~list[ %index ] の`~keyframe~offset$ ~SET %~offsetたち[ %index ]
◎
Assign each value in offsets to the keyframe offset of the keyframe with the corresponding position in processed keyframes until the end of either sequence is reached.
</li>
			<li>
%~easingたち ~LET ［
%~keyframe~map[ "`easing^m" ] は 連列~型であるならば それ／
~ELSE_（ `DOMString^c 型） それのみからなる連列
］
◎
Let easings be a sequence of DOMString values assigned based on the type of the easing member of the property-indexed keyframe as follows:
◎
sequence&lt;DOMString&gt;,
• The value of easing as-is.
DOMString,
• A sequence of length one with the value of easing as its single item, i.e. « easing »,
</li>
			<li>
~IF［
%~easingたち は空である
］
⇒
%~easingたち ~SET « `linear^l »
◎
If easings is an empty sequence, let it be a sequence of length one containing the single value "linear", i.e. « "linear" ».
</li>
			<li>
<p>
~EACH( %index ~IN { 0 〜 %対象~keyframe~list の~size } ~MINUS 1 )
に対し
⇒
%対象~keyframe~list[ %index ][ `easing^l ] ~SET %~easingたち[ %index `mod^op %~easingたち の~size ]
</p>

<p class="example">
例えば，［
%対象~keyframe~list の~sizeは 5,
%~easingたち は連列 « `ease-in^l, `ease-out^l »
］であった場合、
%~easingたち は繰返されて，順に［
`ease-in^l, `ease-out^l, `ease-in^l, `ease-out^l, `ease-in^l
］があてがわれる。
</p>

◎
If easings has fewer items than processed keyframes, repeat the elements in easings successively starting from the beginning of the list until easings has as many items as processed keyframes.
◎
For example, if processed keyframes has five items, and easings is the sequence « "ease-in", "ease-out" », easings would be repeated to become « "ease-in", "ease-out", "ease-in", "ease-out", "ease-in" ».
◎
If easings has more items than processed keyframes, store the excess items as unused easings.
◎
Assign each value in easings to a property named "easing" on the keyframe with the corresponding position in processed keyframes until the end of processed keyframes is reached.
</li>
			<li>
%組成-~modeたち ~LET ［
%~keyframe~map[ "`composite^m" ] は 連列~型であるならば それ ／
~ELSE_ それ（ `CompositeOperationOrAuto$I 列挙~値）のみからなる連列
］
◎
If the composite member of the property-indexed keyframe is not an empty sequence:
• Let composite modes be a sequence of CompositeOperationOrAuto values assigned from the composite member of property-indexed keyframe. If that member is a single CompositeOperationOrAuto value operation, let composite modes be a sequence of length one, with the value of the composite as its single item.
</li>
			<li>
~IF［
%組成-~modeたち は空~連列でない
］
⇒
~EACH( %index ~IN { 0 〜 %対象~keyframe~list の~size } ~MINUS 1 )
に対し
⇒
%対象~keyframe~list[ %index ] の`~keyframeに特有な組成-演算~型$ ~SET %組成-~modeたち[ %index `mod^op %組成-~modeたち の~size ]
◎
• As with easings, if composite modes has fewer items than processed keyframes, repeat the elements in composite modes successively starting from the beginning of the list until composite modes has as many items as processed keyframes.
• Assign each value in composite modes that is not auto to the keyframe-specific composite operation on the keyframe with the corresponding position in processed keyframes until the end of processed keyframes is reached.
</li>
		</ol>
	</li>
	<li>
%前の~offset ~LET 負な無限大
◎
↓</li>
	<li>
<p>
%対象~keyframe~list 内の
~EACH( %~keyframe )
に対し：
</p>
		<ol>
			<li>
%~offset ~LET %~keyframe の`~keyframe~offset$
</li>
			<li>
~IF［
%~offset ~EQ ~NULL
］
⇒
~CONTINUE
</li>
			<li>
~IF［
%~offset ~LT 0
］~OR［
%~offset ~GT 1
］
⇒
~THROW `TypeError^E
</li>
			<li>
~IF［
%~offset ~LT %前の~offset
］
⇒
~THROW `TypeError^E
（`~offsetにより~looseに~sortされ$ていない）
</li>
			<li>
%前の~offset ~SET %~offset
</li>
		</ol>
◎
If processed keyframes is not loosely sorted by offset, throw a TypeError and abort these steps.
◎
If there exist any keyframe in processed keyframes whose keyframe offset is non-null and less than zero or greater than one, throw a TypeError and abort these steps.
</li>
	<li>
<p>
%対象~keyframe~list 内の
~EACH( %~keyframe )
に対し：
◎
For each frame in processed keyframes, perform the following steps:
</p>
		<ol>
			<li>
<p>
%~keyframe 内の
~EACH( %~prop名 → %~prop値 )
に対し：
◎
For each property-value pair in frame,＼
</p>
				<ol>
					<li>
~IF［
【！＊】%~prop名 ~IN { `composite^l, `easing^l, `offset^l }
］
⇒
~CONTINUE
◎
</li>
					<li>
%~prop名 用の構文を用いて %~prop値 を構文解析する
◎
parse the property value using the syntax specified for that property.
</li>
					<li>
~IF［
%~prop値 は %~prop名 が指示する~propの構文に則って妥当でない
］
⇒
%~keyframe[ %~prop名 ] ~SET ε
（この~propは破棄する）
— ~UAは、
内容~内の~errorを診断するための~supportを供するならば，
妥当でない %~prop値 を強調するような適切な警告を生産するベキである。
◎
If the property value is invalid according to the syntax for the property, discard the property-value pair. User agents that provide support for diagnosing errors in content SHOULD produce an appropriate warning highlighting the invalid property value.
</li>
				</ol>
			</li>
			<li>
%~easing関数 ~LET %~keyframe[ `easing^l ] を［
`EffectTiming$I 辞書の `easing$m1 ~member用に定義された~CSS構文
］に`則って構文解析-$した結果
◎
Let the easing function of frame be the result of parsing the easing property on frame using the CSS syntax defined for the easing member of the EffectTiming dictionary.
</li>
			<li>
~IF［
%~easing関数 ~EQ `失敗^i
］
⇒
~THROW `TypeError^E
◎
If parsing the easing property fails, throw a TypeError and abort this procedure.
</li>
			<li>
%~keyframe の`~easing関数$ ~SET %~easing関数
</li>
		</ol>

<p class="note">注記：
この段では~CSS構文解析器を利用するので、
入力には~CSS［
~comment／~escape法
］も許容されるが，
値が成功裡に構文解析されたとしても それらは維持されない。
◎
Note: Using the CSS parser in both of the above steps implies that CSS comments and escaping are allowed, but are not retained when the value is successfully parsed.
</p>

<p class="note">注記：
`easing^l ~propを構文解析するのに失敗した事例では、
%~obj から すべての~propを`読取った後^emに `TypeError^E を投出することが重要になる
— そうするのに失敗することは、
観測-可能になり，［
~Web~IDLにて，後で `partially open-ended^en 辞書が~supportされた場合の挙動
］と合致しなくなるので。
【？】
◎
Note: In the case where the "easing" property fails to parse, it is important that the TypeError is thrown after all reading the properties from object since failing to do so would be observable and will not match the behavior if partially open-ended dictionaries are later supported in WebIDL.
</p>
	</li>
	<li>
<p>
~IF［
%~method ~EQ `undefined^jv
］
⇒
%~easingたち から最初の［
%対象~keyframe~list の~size
］個の~itemを除去した結果の~listを成す
~EACH( %~easing )
に対し
⇒
~IF［
%~easing を［
`EffectTiming$I 辞書の `easing$m1 ~member用に定義された~CSS構文
］に`則って構文解析-$した結果 ~EQ `失敗^i
］
⇒
~THROW `TypeError^E
◎
Parse each of the values in unused easings using the CSS syntax defined for the easing member of the EffectTiming dictionary, and if any of the values fail to parse, throw a TypeError and abort this procedure.
</p>

<div class="note">
<p>注記：
この最後の段は、［
次に挙げるどの事例でも，一貫して `TypeError^E が投出される挙動
］を供するために必要になる：
◎
This final step is needed in order to provide consistent behavior such that a TypeError is thrown in all of the following cases:
</p>

<pre class="lang-js">
%elem.animate({ easing: 'invalid' });
%elem.animate({ easing: ['invalid'] });
%elem.animate([{ easing: 'invalid' }]);
</pre>
</div>
	</li>
</ol>
</div>

			</section>
			<section id="the-keyframeeffectoptions-dictionary">
<h4 title="The KeyframeEffectOptions dictionary">6.6.4. `KeyframeEffectOptions^I 辞書</h4>

<p>
`KeyframeEffect(target, keyframes, options)$m0 構築子には、
`KeyframeEffectOptions$I ~objを供して追加的な~parameterが渡されてもヨイ。
◎
Additional parameters may be passed to the KeyframeEffect(target, keyframes, options) constructor by providing a KeyframeEffectOptions object.
</p>

<pre class="idl">
dictionary `KeyframeEffectOptions@I : `EffectTiming$I {
  `CompositeOperation$I `composite$m = "replace";
  `CSSOMString$? `pseudoElement$m = null;
};
</pre>

<dl class="idl-def">
	<dt>
`composite@m
◎
composite, of type CompositeOperation, defaulting to "replace"
</dt>
	<dd>
`組成-演算~型$を `CompositeOperation$I 列挙~値として与える。
この~animationを`効果~stack$で組成するために利用される。
これは、
`~keyframe$のうち［
`~keyframeに特有な組成-演算~型$に `~autoCO$l が指定されたもの
］すべてから利用される。
◎
The composite operation used to composite this animation with the effect stack, as specified by one of the CompositeOperation enumeration values. This is used for all keyframes that specify an auto keyframe-specific composite operation.
</dd>

	<dt>
`pseudoElement@m
◎
pseudoElement, of type CSSOMString, nullable, defaulting to null
</dt>
	<dd>
`~target疑似-選択子$を与える（ ~NULL または妥当な値でなければナラナイ）
— 所与の`~target要素$用の`効果~target$を指定するために利用される。
◎
The pseudo-element selector (which must be valid or null) used to specify the effect target given the target element.
</dd>
</dl>

			</section>
		</section>
		<section id="the-compositeoperation-enumeration">
<h3 title="The CompositeOperation and CompositeOperationOrAuto enumerations">6.7. `CompositeOperation^I, `CompositeOperationOrAuto^I 列挙</h3>

<p>
`~keyframe効果$の組成の挙動にアリな`組成-演算~型$は、
`CompositeOperation$I 列挙により表現される
【各~列挙~値は、暗黙的に，対応する組成-演算~型と同一視される】：
◎
The possible values of an keyframe effect’s composition behavior are represented by the CompositeOperation enumeration.
</p>

<pre class="idl">
enum `CompositeOperation@I {
  `replace$l,
  `add$l,
  `accumulate$l
};
</pre>

<dl class="idl-def">
	<dt>`replace@l</dt>
	<dd>
`置換-型$に対応する
— `~animation効果$は、
その`下層~値$を上書きするように結合される。
◎
Corresponds to the replace composite operation value such that the animation effect overrides the underlying value it is combined with.
</dd>

	<dt>`add@l</dt>
	<dd>
`加算-型$に対応する
— `~animation効果$は、
その`下層~値$に`加算-$するように結合される。
◎
Corresponds to the add composite operation value such that the animation effect is added to the underlying value with which it is combined.
</dd>

	<dt>`accumulate@l</dt>
	<dd>
`累積-型$に対応する
— `~animation効果$は、
その`下層~値$に`累積-$するように結合される。
◎
Corresponds to the accumulate composite operation value such that the animation effect is accumulated onto the underlying value.
</dd>
</dl>

<p>
`~keyframeに特有な組成-演算~型$にアリな値は、
`CompositeOperation$I 列挙と同じ値たち, および追加的な `~autoCO$l 値で表現される：
◎
The possible values of a keyframe's composition behavior share the same values as the CompositeOperation enumeration along with the additional auto value.
</p>

<pre class="idl">
enum `CompositeOperationOrAuto@II {
  `replace$l,
  `add$l,
  `accumulate$l,
  `~autoCO$l
};
</pre>

<dl class="idl-def">
	<dt>`~autoCO@l</dt>
	<dd>
ε に対応する
— 当の`~keyframe$が属する`~keyframe効果$の`組成-演算~型$を利用するべきであることを指示する。
◎
Indicates that the composite operation of the associated keyframe effect should be used.
</dd>
</dl>

		</section>
		<section id="the-animatable-interface-mixin">
<h3 title="The Animatable interface mixin">6.8. `Animatable^I ~interface~mixin</h3>

<p>
`~animation効果$（ `KeyframeEffect$I ~obj）の`~target要素$にもなり得る~objは、
`Animatable$I ~interface~mixinを実装する。
◎
Objects that could be the target of an KeyframeEffect object implement the Animatable interface mixin.
</p>

<pre class="idl">
interface mixin `Animatable@I {
  `Animation$I `animate$m(
      `object$? %keyframes,
      optional (`unrestricted double$ or `KeyframeAnimationOptions$I) %options = {}
  );
  `sequence$&lt;`Animation$I&gt; `getAnimations$m(optional `GetAnimationsOptions$I %options = {});
};
dictionary `KeyframeAnimationOptions@I : `KeyframeEffectOptions$I {
  `DOMString$ `id$m = "";
  `AnimationTimeline$I? `timeline$m;
};

dictionary `GetAnimationsOptions@I {
  boolean `subtree$m = false;
  `CSSOMString$? `pseudoElement$m = null;
};
</pre>

<!-- ＊
`Animatable@I
 -->

<dl class="idl-def">
	<dt>
`animate(keyframes, options)@m
◎
Animation animate(keyframes, options)
</dt>
	<dd class="algo">
<p>
~method手続きは：
◎
Performs the following steps:
</p>
		<ol>
			<li>
%~realm ~LET コレに`関連な~realm$
◎
↓</li>
			<li>
%効果 ~LET %~realm 内の新たな `KeyframeEffect$I ~obj
◎
↓</li>
			<li>
%効果 上の `KeyframeEffect$m0 構築子~手続き( コレ, %keyframes, %options )
（例外が投出され得る）
◎
Let target be the object on which this method was called.
◎
Construct a new KeyframeEffect object effect in the relevant Realm of target by using the same procedure as the KeyframeEffect(target, keyframes, options) constructor, passing target as the target argument, and the keyframes and options arguments as supplied.
◎
If the above procedure causes an exception to be thrown, propagate the exception and abort this procedure.
</li>
			<li>
%時列線 ~SET ε
◎
↓</li>
			<li>
~IF［
%options は `KeyframeAnimationOptions$I ~objである
］
⇒
%時列線 ~SET %options[ "`timeline$m1" ]
【！%時列線 ~SET `現在の大域~obj$（ `Window$I ）に`結付けられた文書$の`既定の文書~時列線$】
◎
If options is a KeyframeAnimationOptions object, let timeline be the timeline member of options or, if timeline member of options is missing, the default document timeline of the node document of the element on which this method was called.
</li>
			<li>
%~animation ~LET %~realm 内の新たな `Animation$I ~obj
◎
↓</li>
			<li>
<p>
~IF［
%時列線 ~EQ ε
］
⇒
%~animation 上の `Animation$m0 構築子~手続き( %効果 )
</p>

<p class="trans-note">【
この段は、
この訳による補完：
原文は、
%options が `KeyframeAnimationOptions^I であって
%時列線 ~EQ ε になる場合に %時列線 を設定する記述があるが、
それは， `new Animation^m 構築子の中でまったく同じに設定されるので必要ない。
加えて，
%options が `KeyframeAnimationOptions^I でない場合に %時列線 を設定していないが、
その場合も省略するものと見受けられる。
】</p>
			</li>
			<li>
~ELSE
⇒
%~animation 上の `Animation$m0 構築子~手続き( %効果, %時列線 )
◎
Construct a new Animation object, animation, in the relevant Realm of target by using the same procedure as the Animation() constructor, passing effect and timeline as arguments of the same name.
</li>
			<li>
~IF［
%options は `KeyframeAnimationOptions$I ~objである
］
⇒
%~animation の `id$m 属性 ~SET %options[ "`id$m1" ]
◎
If options is a KeyframeAnimationOptions object, assign the value of the id member of options to animation’s id attribute.
</li>
			<li>
`~animationを再生する$( %~animation, `自動で巻戻す^i )
◎
Run the procedure to play an animation for animation with the auto-rewind flag set to true.
</li>
			<li>
~RET %~animation
◎
Return animation.
</li>
		</ol>
	</dd>
	<dd class="informative">
◎非規範的

<p>
次の~code片は：
◎
The following code fragment:
</p>

<pre class="lang-js">
var %animation = %elem.animate({ opacity: 0 }, 2000);
</pre>

<p>
概ね，次に等価になる：
◎
is roughly equivalent to:
</p>

<pre class="lang-js">
var %effect = new KeyframeEffect(elem, { opacity: 0 }, 2000);
var %animation = new Animation(effect, elem.ownerDocument.timeline);
animation.play();
</pre>

	</dd>
	<dd class="parameters">
%keyframes 引数は、
利用する`~keyframe$を与える。
%options 引数は、
作成される `KeyframeEffect$I 用の各種［
計時, ~animation
］~optionを与える。
◎
keyframes
• The keyframes to use. This value is passed to the KeyframeEffect(target, keyframes, options) constructor as the keyframes parameter and has the same interpretation as defined for that constructor.
◎
options
• The timing and animation options for the created KeyframeEffect and Animation.
</dd>

	<dt>
`getAnimations(options)@m
◎
sequence&lt;Animation&gt; getAnimations(options)
</dt>
	<dd>
<p>
~method手続きは：
`GetAnimationsOptions^II
◎
• Let object be the object on which this method was called.
</p>
		<ol>
			<li>
%~target ~LET コレ
◎
↓</li>
			<li>
%疑似要素~名 ~LET %options[ "`pseudoElement$m1" ]
◎
↓</li>
			<li>
<p>
~IF［
%疑似要素~名 ~NEQ ~NULL
］：
</p>
				<ol>
					<li>
%疑似要素~名 ~SET `疑似要素~名を構文解析する$( %疑似要素~名 )
</li>
					<li>
%~target ~SET コレを`出自の要素$とする`疑似要素$のうち %疑似要素~名 により識別されもの
</li>
				</ol>
◎
Let pseudoElement be the result of pseudo-element parsing applied to pseudoElement of options, or null if options is not passed.
◎
If pseudoElement is not null, then let target be the pseudo-element identified by pseudoElement with object as the originating element.＼
↑ Otherwise, let target be object.
</li>
			<li>
~RET %options[ "`subtree$m1" ] に応じて
⇒＃
~T ならば %~target の`下位tree用の関連な~animation群$†／
~F ならば %~target に`関連な~animation群$†
【† を成す各`~animation$を表現する `Animation$I ~objたちが成す~list】
◎
If options is passed with subtree set to true, then return the set of relevant animations for a subtree of target.＼
Otherwise, return the set of relevant animations for target.
</li>
		</ol>
	</dd>
	<dd>
返される~listは、［
該当する~animationに`結付けられた効果$の各`~target~prop$の`効果~stack$
］にて述べた`組成-順序$を利用して~sortされる。
◎
The list returned by the above algorithm is sorted using the composite order described for the associated animations of effects in § 5.4.2 The effect stack.
</dd>
	<dd>
この~methodを~callすると，`~target要素$に対し`~style変化~event$を誘発する。
その結果，返される~listは、
~animationに対する まだ処理-待ちにある~style変更
— ~animationに関係する~style~prop【各種 `animation-*^p, `transition-*^p など】に対する変更など —
があれば，それらを`適用した後^emの状態を反映する。
◎
Calling this method triggers a style change event for the target element. As a result, the returned list reflects the state after applying any pending style changes to animation such as changes to animation-related style properties that have yet to be processed.
◎
（略）
options
• Parameters governing the set of animations returned by getAnimations().
</dd>
</dl>

<p class="idl-def">
`KeyframeAnimationOptions$I0 の：
◎
↓</p>
<ul>
	<li>
`id@m
は、
生成される `Animation$II の `id$m1 属性にアテガう文字列を与える。
◎
id, of type DOMString, defaulting to ""
• The string to assign to the generated Animation's id attribute.
</li>
	<li>
`timeline@m
は省略可能であり、
在るならば，新たに作成される`~animation$の`時列線$Anを指定する。
◎
timeline, of type AnimationTimeline, nullable
• An optional value which, if present, specifies the timeline with which to associate the newly-created animation.
</li>
</ul>

<p class="idl-def">
`GetAnimationsOptions$I の［
`subtree@m1
,
`pseudoElement@m1
］~memberについては、
`Animatable^II
`getAnimations()$m1 を見よ【以下略】。
◎
subtree, of type boolean, defaulting to false
• If true, indicates that animations associated with an animation effect whose target element is a descendant of the object on which getAnimations() is called should also be included in the result.
◎
pseudoElement, of type CSSOMString, nullable, defaulting to null
• If set, indicates that the target of the operation is the pseudo-element identified by this pseudo selector (e.g. ::before) with the originating element being the object on which the function is called.
</p>

		</section>
		<section id="extensions-to-the-document-interface">
<h3 title="Extensions to the Document interface">6.9. `Document^I ~interfaceに対する拡張</h3>

<p>
`DOM$r に定義される `Document$I ~interfaceは、
次により拡張される：
◎
The following extensions are made to the Document interface defined in [DOM].
</p>

<pre class="idl">
partial interface `Document$I0 {
  readonly attribute `DocumentTimeline$I `timeline$m;
};
</pre>

<dl class="idl-def">
	<dt>
`timeline@m
◎
timeline, of type DocumentTimeline, readonly
</dt>
	<dd class="algo">
取得子~手続きは
⇒
~RET コレの`既定の文書~時列線$を表現している `DocumentTimeline$I ~obj
◎
The DocumentTimeline object representing the default document timeline.
</dd>
</dl>

		</section>
		<section id="extensions-to-the-documentorshadowroot-interface-mixin">
<h3 title="Extensions to the DocumentOrShadowRoot interface mixin">6.10. `DocumentOrShadowRoot^I ~interface~mixinに対する拡張</h3>

<p>
`DOM$r に定義される `DocumentOrShadowRoot$I ~interface~mixinは、
次により拡張される：
◎
The following extensions are made to the DocumentOrShadowRoot interface mixin defined in [DOM].
</p>

<pre class="idl">
partial interface mixin `DocumentOrShadowRoot$I0 {
  `sequence$&lt;`Animation$I&gt; `getAnimations$m();
};
</pre>

<dl class="idl-def">
	<dt>
`getAnimations()@m
◎
sequence&lt;Animation&gt; getAnimations()
</dt>
	<dd>
コレの`下位tree用の関連な~animation群$
【を成す各`~animation$を表現する `Animation$I ~objからなる~list】
を返す。
◎
Returns the set of relevant animations for a subtree for the document or shadow root on which this method is called.
</dd>
	<dd>
返される~listは、［
該当する~animationに`結付けられた効果$の各`~target~prop$の`効果~stack$
］にて述べた`組成-順序$を利用して~sortされる。
◎
The returned list is sorted using the composite order described for the associated animations of effects in § 5.4.2 The effect stack.
</dd>
	<dd>
この~methodを~callすると，この文書に対し`~style変化~event$を誘発する。
その結果，返される~listは、
~animationに対する まだ処理-待ちにある~style変更
— ~animationに関係する~style~prop【各種 `animation-*^p, `transition-*^p など】に対する変更など —
があれば，それらを`適用した後^emの状態を反映する。
◎
Calling this method triggers a style change event for the document. As a result, the returned list reflects the state after applying any pending style changes to animation such as changes to animation-related style properties that have yet to be processed.
</dd>
</dl>

		</section>
		<section id="extensions-to-the-element-interface">
<h3 title="Extensions to the Element interface">6.11. `Element^I ~interfaceに対する拡張</h3>

<p>
`Element$I `DOM$r は，~animationの~targetになり得るので、
その~interfaceは，次のとおり拡張される：
◎
Since DOM Elements can be the target of an animation, the Element interface [DOM] is extended as follows:
</p>

<pre class="idl">
`Element$I includes `Animatable$I;
</pre>

<div class="example">
<p>
これは、
次の類の用法を許容する。
◎
This allows the following kind of usage.
</p>

<pre class="lang-js">
%elem.animate({ color: 'red' }, 2000);
</pre>
</div>

		</section>
		<section id="the-animationplaybackevent-interface">
<h3 title="The AnimationPlaybackEvent interface">6.12. `AnimationPlaybackEvent^I ~interface</h3>

<p>
`~animation再生~event$は、
`AnimationPlaybackEvent$I ~interfaceを利用して表現される。
◎
Animation playback events are represented using the AnimationPlaybackEvent interface.
</p>

<pre class="idl">
[`Exposed$=Window]
interface `AnimationPlaybackEvent@I : `Event$I {
  `AnimationPlaybackEvent$mc(`DOMString$ %type, optional `AnimationPlaybackEventInit$I %eventInitDict = {});
  readonly attribute `double$? `currentTime$m;
  readonly attribute `double$? `timelineTime$m;
};
dictionary `AnimationPlaybackEventInit@I : `EventInit$I {
  `double$? `currentTime@m = null;
  `double$? `timelineTime@m = null;
};
</pre>

<!-- ＊
`AnimationPlaybackEvent@I
 -->

<dl class="idl-def">
	<dt>
`AnimationPlaybackEvent(type, eventInitDict)@m0
◎
AnimationPlaybackEvent(type, eventInitDict)
</dt>
	<dd>
`~eventを構築する$手続-を利用して，新たな `AnimationPlaybackEvent$I ~objを構築する
`DOM$r
◎
Constructs a new AnimationPlaybackEvent object using the procedure defined for constructing events [DOM].
</dd>

	<dt>
`currentTime@m
◎
currentTime, of type double, readonly, nullable
</dt>
	<dd>
取得子は、
コレが~queueされた~momentにおける［
コレを生成した`~animation$の`現-時刻$
］を返す。
◎
The current time of the animation that generated the event at the moment the event was queued.＼
</dd>
	<dd>
この~eventが生成された時点で`~animation$は`遊休中$iであった場合、
結果は ~NULL になる。
◎
This will be null if the animation was idle at the time the event was generated.
</dd>

	<dt>
`timelineTime@m
◎
timelineTime, of type double, readonly, nullable
</dt>
	<dd>
取得子は、
コレが~queueされた~momentにおける［
コレを生成した`~animation$の`時列線~現-時刻$
］を返す。
<!-- ＊時列線~現-時刻
これは、~eventが~queueされた時点で`~animation$の`時列線$Anが ~NULL または`作動中$でなかった場合には ~NULL になる。
-->
◎
The time value of the timeline with which the animation that generated the event is associated at the moment the event was queued. This will be null if the animation was not associated with an active timeline at the time the event was queued.
◎
</dd>
</dl>

<p>
◎
訳は省略：
currentTime, of type double, nullable, defaulting to null
• See the description of the currentTime attribute.
◎
timelineTime, of type double, nullable, defaulting to null
• See the description of the timelineTime attribute.
</p>

		</section>
		<section id="model-liveness">
<h3 title="Model liveness">6.13. ~modelの~live性</h3>

<p>
~modelのどこかに加えられた変更は、
`§ 計時~model$
全体, および依存する~styleを更新させる。
◎
Changes made to any part of the model cause the entire timing model to be updated and any dependent style.
</p>

<p>
他が言明されない限り，この`~WAnim~API$に定義される各種~interfaceを成す各［
~methodや構築子を呼出しても，他の~memberを取得しても／設定しても
］，`~style変化~event$を`生産することはない^em。
◎
Unless otherwise stated, invoking the methods or constructors, or getting or setting the members of interfaces defined in the Web Animations API does not produce a style change event.
</p>

<p class="note">注記：
この仕様を拡張する他の仕様には、［
そのような~event`たち^emが，どの状況下で誘発されるか
］を導入することにより，［
`~style変化~event$に対する要件を精緻化する
］ことが期待される。
例えば，［
この仕様~内の~interfaceが，
~CSS~markupにより定義される~animationを表現する
］場合、
それらの~methodの多くは，［
指定された~styleに対する変更を反映するため，
`~style変化~event$を誘発する
］必要がある。
◎
Note: Other specifications that extend this specification are expected to refine the requirements on style change events by introducing circumstances where such events are triggered. For example, when the interfaces in this specification represent animations defined by CSS markup, many of their methods will need to trigger style change events in order to reflect changes to the specified style.
</p>

<div class="informative">
◎非規範的

<p>
上の要件, および［
この仕様~内の他所にある規範的な要件
］に基づいて，以下に挙げる不変則を観測できる：
◎
Based on the above requirement and normative requirements elsewhere in this specification, the following invariants can be observed:
</p>

<dl>
	<dt>
`~WAnim~model$に加えられた変更は、
即時に効果を及ぼす。
◎
Changes made to the Web Animations model take effect immediately
</dt>
	<dd>
例えば，［
ある `Animation$I %~animation に結付けられた `KeyframeEffect$I
］が`~WAnim~API$を介して`~seek$された場合
【！see ~WAnim#setting-the-current-time-of-an-animation】、
%~animation の `startTime$m1 を~queryしたとき返される値は，~modelにて更新された状態を即時に反映することになる。
◎
For example, if the KeyframeEffect associated with an Animation is seeked (see § 4.5.4 Setting the current time of an animation) via the Web Animations API, the value returned when querying the animation’s startTime will reflect updated state of the model immediately.
</dd>
	<dd class="example">

<pre class="lang-js">
/* <span class="comment">
初期~時には
<code>%animation.effect.getComputedTiming().localTime</code>
~EQ 3000 とする。
◎
Initially animation.effect.getComputedTiming().localTime is 3000
</span> */
%animation.currentTime += 2000;
alert(%animation.effect.getComputedTiming().localTime); /* <span class="comment">
5000 が表示される
◎
Displays "5000"
</span> */
</pre>

	</dd>

	<dt>
~animationにより影響される~propの算出d~styleを~queryしたときは、
~animationの最新の状態が返される。
◎
Querying the computed style of a property affected by animation returns the fully up-to-date state of the animation
</dt>
	<dd>
例えば，［
ある要素に新たな `Animation$I を適用した直後に，要素の使用~styleを~queryした
］場合、
返される値には，新たな~animationの結果が組入れられることになる。
◎
For example, if the used style of an element is queried immediately after applying a new Animation to that element, the result of the new animation will be incorporated in the value returned.
</dd>
	<dd class="example">

<pre class="lang-js">
/* <span class="comment">
即時に 不透明度を 0 に設定する
◎
Set opacity to 0 immediately
</span> */
%elem.animate({ opacity: 0 }, { fill: 'forwards' });
alert(window.getComputedStyle(elem).opacity); /* <span class="comment">
0 が表示される
◎
Displays "0"
</span> */
</pre>

	</dd>

	<dt>
同じ~taskの中で加えられた各~変更は、
それらによる変化が~~同時に具現化されるよう同期される。
◎
Changes made within the same task are synchronized such that the whole set of changes is rendered together
</dt>
	<dd>
~modelに対する変更の結果は
— ~ESの `run-to-completion^en 意味論
【平たく言えば、 “完了するか~~許可するまで割り込むな” 】
と組合されて —
即時に効果を及ぼす。
例えば、［
指定した~styleに対する`変更のみが^em，
~animationを適用することなく具現化される
］状況は，決して生じるべきでない。
◎
As a result of changes to the model taking effect immediately combined with ECMAScript’s run-to-completion semantics, there should never be a situation where, for example, only the changes to specified style are rendered without applying animation.
</dd>
	<dd class="example">
<p>
`Element.animate^c を~supportしない ~browser用の~fallbackで，不透明度を~fadeする：
◎
// Fade the opacity with fallback for browsers that don’t support Element.animate
</p>

<pre class="lang-js">
%elem.style.opacity = '0';
%elem.animate([
    { opacity: 1 },
    { opacity: 0 }
], 500);
</pre>

	</dd>
	<dd class="note">注記：
しかしながら，上の例では、
~UAは，上の変更の`どれも適用されない^em ~frameを具現化してもヨイ。
これは例えば、
別々な~process内で描画が生じていて，それは［
上の~taskが完了してすぐ後に, かつ変更を~processに通信できる前
］に走るよう~scheduleされている場合に起こるかもしれない。
◎
Note, however, that in the example above, a user agent may render a frame with none of the above changes applied. This might happen, for example, if rendering occurs in a separate process that is scheduled to run shortly after the above task completes but before the changes can be communicated to the process.
</dd>

	<dt>
`文書~時列線$の `currentTime^m 属性が返す値は、
~taskの中では変化しない。
◎
The value returned by the currentTime attribute of a document timeline will not change within a task
</dt>
	<dd>
［
`~animationを更新して~eventを送信する$手続-が走る各~回に，
`時列線$の`現-時刻$tLを更新する
］とする要件に因り、［
同じ~script~block内で実行される長い~codeが成す~block
］の中で 2 度にわたり `currentTime^m を~queryして返される値は，同じになる
— 次の例に示すように：
◎
Due to the requirement on timelines to update their current time each time the update animations and send events procedure is run, querying the currentTime twice within a long block of code that is executed in the same script block will return the same value as shown in the following example.
</dd>
	<dd class="example">

<pre class="lang-js">
var %a = document.timeline.currentTime;
/* <span class="comment">
... 多数の行からなる~code ...
◎
... many lines of code ...
</span> */
var %b = document.timeline.currentTime;
alert(%b - %a); /* <span class="comment">
0 を表示する
◎
Displays 0
</span> */
</pre>

<p>
`requestAnimationFrame()$m ~callbackに渡される時刻は、
`document.timeline.currentTime^c に等しくなる
◎
The time passed to a requestAnimationFrame callback will be equal to document.timeline.currentTime
</p>
	</dd>
	<dd>
~HTMLの`~event~loop処理~model＠~WAPI#event-loop-processing-model$は，［
`各~animation~frame~callbackを走らす$より先に，`~animationを更新して~eventを送信する$
］ものと定義されていることに加えて［
そのような~callbackには、
両~手続-に渡される時刻印 %今 と同じ時刻が渡される
］ので、
`既定の文書~時列線$の`現-時刻$tLは，
`requestAnimationFrame()$m に渡される時刻に合致するべきである。
◎
Since HTML’s event loop processing model defines that the procedure to update animations and send events is performed prior to running animation frame callbacks, and since the time passed to such callbacks is the same now timestamp is passed to both procedures, the current time of a the default document timeline should match the time passed to requestAnimationFrame.
</dd>
	<dd class="example">

<pre class="lang-js">
window.requestAnimationFrame(function(now) {
  /* <span class="comment">
0 を表示する
◎
Displays 0
</span> */
  alert(now - document.timeline.currentTime);
});
</pre>
</dd>

	<dt>
一般に、
この~APIの~methodを~callしても，遷移は`誘発されない^em
◎
Calling methods from this programming interface will generally not cause transitions to be triggered
</dt>

	<dd class="example">
<p>
次の例を考える：
◎
Consider the following example:
</p>

<pre class="lang-js">
/* <span class="comment">
遷移の開始-点を設定しておく
◎
Setup transition start point
</span>
div.style.opacity = '1';
getComputedStyle(div).opacity;

/* <span class="comment">
遷移~終止-点を設定しておく
◎
Setup transition end point
</span> */
div.style.transition = 'opacity 1s';
div.style.opacity = '0';

/* <span class="comment">
~animationを発火する
◎
Fire an animation
</span> */
div.animate({ opacity: [0.5, 1] }, 500);

/* <span class="comment">
遷移が終止するまで待機する
— 次は決して~callされない。
◎
Wait for the transition to end -- the following will never be called!
</span> */
div.addEventListener('transitionend', () =&gt; {
  console.log('transitionend');
});
</pre>

<p>
この事例では、
`animate()＠#dom-animatable-animate$m を~callしても，
`~style変化~event$は`誘発されない^em。
その結果、
処理待ち~style変化は，
新たな~animationによる結果の~style変化と同時に処理されることになる。
~animation~styleは［
`変化-前~style$, `変化-後~style$
］を上書きするので、
遷移は生成されず，
`transitionend$et ~event用の~event~handlerは決して~callされない。
◎
In this case, calling animate() will not trigger a style change event. As a result, the pending style change will be processed at the same time as the style change resulting from the new animation. Since the animation style will override the before-change style and the after-change style, no transition will be generated and the event handler for the transitionend event will never be called.
</p>
	</dd>
</dl>
</div>

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