Skip to content

Commit d1b6207

Browse files
[css-image-animation] 各種更新
Fix typo w3c/csswg-drafts@7d29013 Cross reference issue w3c/csswg-drafts@6a8da26 Define what state 'running' starts from w3c/csswg-drafts@7e0fe43 Distinguish between the paused and stopped states w3c/csswg-drafts@f6b9da9 Define propagation to the canvas w3c/csswg-drafts@cdc77ac
1 parent 9939290 commit d1b6207

1 file changed

Lines changed: 119 additions & 13 deletions

File tree

css-image-animation-ja.html

Lines changed: 119 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@
100100
●●options
101101

102102
spec_title:CSS Image Animation
103-
spec_date:2026-02-06
104-
trans_update:2026-03-12
103+
spec_date:2026-03-16
104+
trans_update:2026-03-17
105105
source_checked:260202
106106
page_state_key:CSS
107107
original_url:https://drafts.csswg.org/css-image-animation-1/
@@ -146,10 +146,12 @@
146146
●css
147147
p.image-animation:#propdef-image-animation
148148
image-animation: normal:#propdef-image-animation
149+
p.display:~CSSDISP#propdef-display
149150

150151
v.normal:#valdef-image-animation-normal
151152
v.paused:#valdef-image-animation-paused
152153
v.running:#valdef-image-animation-running
154+
v.stopped:#valdef-image-animation-stopped
153155

154156
ps.animated-image:#selectordef-animated-image
155157

@@ -175,12 +177,17 @@
175177
装飾的な画像:#decorative-image
176178
動画:#video
177179
~program的な画像:#programmatic-image
180+
表紙~frame:#cover-frame
178181

179182
●用語(CSS
180183
算出d値:~CASCADE#computed-value
181184
文書~言語:~SELECTORS4#document-language
182185
~host言語:~SELECTORS4#host-language
183186

187+
~要素:~CSSDISP#root-element
188+
189+
~canvas背景:~CSSBG#canvas-background
190+
184191
●用語(外部
185192
絶対~URL:~URL1#syntax-url-absolute
186193
~poster~frame:~HEmedia#poster-frame
@@ -228,9 +235,11 @@
228235
JPEG:
229236
PNG:
230237
poster::::ポスター
238+
表紙:cover::~
231239

232240
動く絵:moving picture
233241
もはや同期しなくなる:without regard to how far along ... is now out of sync.
242+
始まり:beginnig
234243

235244
●CSS
236245
装飾的:decorative::~
@@ -256,6 +265,7 @@
256265
任意選択可能:opt-in:~
257266
機能-:function:~
258267
全部的に機能する:fully functional
268+
作成者:creator:~
259269

260270
予め除外する:preclude
261271
を問わず:without regard to~regard
@@ -291,6 +301,7 @@
291301
その逆:vice-versa
292302
~code片:code snippet
293303
に関して作業すること:working out
304+
と称される:referred
294305

295306
●未分類
296307
付随-:accompany:~
@@ -340,8 +351,12 @@
340351

341352
●●ref_normative
342353

354+
[CSS-BACKGROUNDS-3]
355+
Elika Etemad; Brad Kemper. <CSS Backgrounds and Borders Module Level 3. URL: https://drafts.csswg.org/css-backgrounds/
343356
[CSS-CASCADE-5]
344357
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <CSS Cascading and Inheritance Level 5. URL: https://drafts.csswg.org/css-cascade-5/
358+
[CSS-DISPLAY-4]
359+
Elika Etemad; Tab Atkins Jr.. <CSS Display Module Level 4. URL: https://drafts.csswg.org/css-display-4/
345360
[CSS-VALUES-4]
346361
Tab Atkins Jr.; Elika Etemad. <CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
347362
[HTML]
@@ -486,7 +501,7 @@ <h2 title="Introduction">1. 序論</h2>
486501
ある疑似類( `animated-image$ps )
487502
を提案する。
488503
489-
This specification proposes a CSS property ('image animation') and a pseudo-class (:animated-image) to enable authors to control animations, and to target this control and any UI they wish to associate with it to relevant elements.
504+
This specification proposes a CSS property (image-animation) and a pseudo-class (:animated-image) to enable authors to control animations, and to target this control and any UI they wish to associate with it to relevant elements.
490505
</p>
491506

492507
<p>
@@ -516,7 +531,7 @@ <h2 title="Controlling Image Animations: the image-animation property">2. 画像
516531

517532
<div>
518533
◎名 `image-animation@p
519-
◎値 `normal$v | `paused$v | `running$v
534+
◎値 `normal$v | `paused$v | `stopped$v | `running$v
520535
◎初 `normal$v
521536
◎適 `内容~画像$【を表現している要素】/`装飾的な画像$を伴う要素
522537
◎継 される
@@ -578,6 +593,15 @@ <h2 title="Controlling Image Animations: the image-animation property">2. 画像
578593
In the case of non-animated images, the different values of this property have no effect. This property does not affect videos nor programmatic images either.
579594
</p>
580595

596+
<p>
597+
この~propが`根~要素$に適用されたときは、[
598+
当の要素の背景を成す`装飾的な画像$
599+
]に対する その効果は,
600+
`~canvas背景$へ伝播する。
601+
602+
When this property is applied to the root element, its effects on background decorative images are propagated to the canvas background.
603+
</p>
604+
581605
<dl>
582606
<dt>`normal@v</dt>
583607
<dd>
@@ -621,30 +645,100 @@ <h2 title="Controlling Image Animations: the image-animation property">2. 画像
621645
Note: The above requirement is based on a [HTML] rendering expectation defined in HTML § 15.4.2 Images. As [HTML] does not generally require user agents to present documents in any particular way, and therefore does not normatively require the above behavior. This specification does.
622646
</dd>
623647

624-
<dt>`paused@v</dt>
648+
<dt>`stopped@v </dt>
625649
<dd>
650+
<p>
626651
`~animateされる画像$は、
627652
`静的な画像$であったかのように描画される
628653
— ~UAは、
629-
それが包含する~animationを稼働しないモノトスル。
654+
次に従うモノトスル:
655+
</p>
656+
<ul>
657+
<li>
658+
当の画像が包含する~animationを稼働しない。
659+
</li>
660+
<li>
661+
当の画像が`表紙~frame$を包含する場合、
662+
それを利用する
663+
— 他の場合、
664+
当の~animationの初期~状態として表示する。
665+
</li>
666+
</ul>
667+
668+
Animated images are rendered as if they were static images: the user agent must not run any animation it contains. If the image contains a cover frame, that is what the user agent must use; otherwise, it must display the image as it would be in the initial state of the animation.
669+
</dd>
670+
671+
<dt>`paused@v</dt>
672+
<dd>
673+
~UAは、
674+
`~animateされる画像$内に包含される~animationを稼働することなく,
675+
この値が適用された時点の画像を継続して
676+
— 実質的に,~animationを静止して —
677+
表示するモノトスル。
678+
679+
The user agent must not run the animation contained in the Animated images, and must continue to display the image as it was when this value started to apply, effectively pausing the animation.
680+
</dd>
681+
<dd>
682+
この値が適用された時点で,まだ~animationを再生していなかった場合の挙動は、
683+
`stopped$v と同じになる。
630684
631-
Animated images are rendered as if they were static images: the user agent must not run any animation it contains.
685+
If the animation had not been playing prior to this value being applied, the behavior is the same as stopped.
632686
</dd>
633687

634688
<dt>`running@v</dt>
635689
<dd>
636-
次を除いて `normal$v と同じに挙動する
690+
`~animateされる画像$の~animationは、
691+
`normal$v と同じく稼働する
692+
— ただし
637693
638-
~groupとして同じ時列線に同期されるものは
694+
~groupとして同じ時列線に同期される画像は
639695
当の要素の`~animateされる画像$たち(`内容~画像$/`装飾的な画像$たち)に限られる
640696
— [
641697
`image-animation$p の算出d値が `running$v をとる他の要素
642698
]における画像たちは、
643699
別個な時列線に同期される。
644700
645-
Like normal, the animation of animated images is run normally, as determined by the image format and the host language,
701+
Like normal, the animation of animated images is run normally, as determined by the image format and the host language.
702+
703+
However, animation timelines are scoped per element: among the content image and decorative images of a single element, any animated images with the same absolute URL, the same image data, and with an image-animation computed value of running must be rendered synchronized to the same timeline as a group, distinct from the timeline of images in other elements.
704+
</dd>
705+
<dd>
706+
<p>
707+
加えて、
708+
この時列線は:
709+
</p>
710+
<ul>
711+
<li>
712+
【当の要素に`~animateされる画像$が在る下で,】
713+
この~propが別の値から `running$v へ切替えられた場合には、[
714+
当の~animationが切替えられた時点に表示していた状態
715+
]から継続するよう,その始まりが設定される。
716+
</li>
717+
<li>
718+
<p>
719+
他の場合、
720+
次のうち遅い方の時点から開始するとする:
721+
</p>
722+
<ul>
723+
<li>
724+
当の~groupに最初に画像が追加されたとき
725+
</li>
726+
<li>
727+
次に挙げるいずれかによる結果,
728+
当の要素が~layout内に含められたとき
729+
⇒#
730+
当の要素が作成された/
731+
当の要素の `display$p ~propが それまで `none^v に設定されていて,その後に可視になった
732+
</li>
733+
</ul>
734+
</li>
735+
</ul>
736+
737+
If images are added to the element while the computed value is running, the timeline starts at the time of the least recent addition to the group.
738+
739+
If the element is created or made visible after having previously been set to display: none, with images already added and with image-animation already set to running, the timeline starts when the element is included in the layout.
646740
647-
However, animation timelines are scoped per element: among the content image and decorative images of a single element, any animated images with the same absolute URL, the same image data, and with an image-animation computed value of running must be rendered synchronized to the same timeline as a group, distinct from the timeline of images in other elements, with the timeline starting at the time of the least recent addition to the group.
741+
If this property is switched to running from another value, the beginnig of this timeline is set so that the animation continues from the state that was displayed at the timem of the switch.
648742
</dd>
649743
</dl>
650744

@@ -1008,18 +1102,30 @@ <h2 title="Terminology">4. 各種用語</h2>
10081102
`~program的な画像$を表現する。
10091103
10101104
The canvas [HTML] element represents a programmatic image.
1105+
</dd>
1106+
1107+
<dt>`表紙~frame@</dt>
1108+
<dd>
1109+
`~animateされる画像$の形式には、
1110+
画像の作成者が[
1111+
~animationが稼働していないとき表示するための`静的な画像$
1112+
]を(~animationの初期~状態とは別個に)指定することをアリにするものもある
1113+
— そのような画像は、
1114+
この文書においては`表紙~frame$と称される。
1115+
1116+
Some animated image formats make it possible for the creator of the image to specify a static image, referred to in this document as the cover frame, to display when the animation is not running, distinctly from the initial state of the animation.
10111117
</dd>
10121118
</dl>
10131119

10141120
<p class="issue">
10151121
`video$e 要素が,その`~poster~frame$を表現しているとき、
1016-
次に挙げる どれとして扱われるベキか?
1122+
次に挙げる どれとして扱われるベキか? [`13641$issue]
10171123
⇒#
10181124
`内容~画像$,
10191125
`装飾的な画像$,
10201126
まったく画像ではない`動画$(のある状態)
10211127
1022-
Should the video element when it represents its poster frame be treated as a content image, a decorative image, or as (a state of) a video and not an image at all?
1128+
Should the video element when it represents its poster frame be treated as a content image, a decorative image, or as (a state of) a video and not an image at all? [w3c/csswg-drafts Issue #13641]
10231129
</p>
10241130

10251131
</section>

0 commit comments

Comments
 (0)