|
100 | 100 | ●●options |
101 | 101 |
|
102 | 102 | 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 |
105 | 105 | source_checked:260202 |
106 | 106 | page_state_key:CSS |
107 | 107 | original_url:https://drafts.csswg.org/css-image-animation-1/ |
|
146 | 146 | ●css |
147 | 147 | p.image-animation:#propdef-image-animation |
148 | 148 | image-animation: normal:#propdef-image-animation |
| 149 | +p.display:~CSSDISP#propdef-display |
149 | 150 |
|
150 | 151 | v.normal:#valdef-image-animation-normal |
151 | 152 | v.paused:#valdef-image-animation-paused |
152 | 153 | v.running:#valdef-image-animation-running |
| 154 | +v.stopped:#valdef-image-animation-stopped |
153 | 155 |
|
154 | 156 | ps.animated-image:#selectordef-animated-image |
155 | 157 |
|
|
175 | 177 | 装飾的な画像:#decorative-image |
176 | 178 | 動画:#video |
177 | 179 | ~program的な画像:#programmatic-image |
| 180 | +表紙~frame:#cover-frame |
178 | 181 |
|
179 | 182 | ●用語(CSS |
180 | 183 | 算出d値:~CASCADE#computed-value |
181 | 184 | 文書~言語:~SELECTORS4#document-language |
182 | 185 | ~host言語:~SELECTORS4#host-language |
183 | 186 |
|
| 187 | +根~要素:~CSSDISP#root-element |
| 188 | + |
| 189 | +~canvas背景:~CSSBG#canvas-background |
| 190 | + |
184 | 191 | ●用語(外部 |
185 | 192 | 絶対~URL:~URL1#syntax-url-absolute |
186 | 193 | ~poster~frame:~HEmedia#poster-frame |
|
228 | 235 | JPEG: |
229 | 236 | PNG: |
230 | 237 | poster::::ポスター |
| 238 | +表紙:cover::~ |
231 | 239 |
|
232 | 240 | 動く絵:moving picture |
233 | 241 | もはや同期しなくなる:without regard to how far along ... is now out of sync. |
| 242 | + 始まり:beginnig |
234 | 243 |
|
235 | 244 | ●CSS |
236 | 245 | 装飾的:decorative::~ |
|
256 | 265 | 任意選択可能:opt-in:~ |
257 | 266 | 機能-:function:~ |
258 | 267 | 全部的に機能する:fully functional |
| 268 | +作成者:creator:~ |
259 | 269 |
|
260 | 270 | 予め除外する:preclude |
261 | 271 | を問わず:without regard to~regard |
|
291 | 301 | その逆:vice-versa |
292 | 302 | ~code片:code snippet |
293 | 303 | に関して作業すること:working out |
| 304 | + と称される:referred |
294 | 305 |
|
295 | 306 | ●未分類 |
296 | 307 | 付随-:accompany:~ |
|
340 | 351 |
|
341 | 352 | ●●ref_normative |
342 | 353 |
|
| 354 | +[CSS-BACKGROUNDS-3] |
| 355 | + Elika Etemad; Brad Kemper. <CSS Backgrounds and Borders Module Level 3>. URL: https://drafts.csswg.org/css-backgrounds/ |
343 | 356 | [CSS-CASCADE-5] |
344 | 357 | 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/ |
345 | 360 | [CSS-VALUES-4] |
346 | 361 | Tab Atkins Jr.; Elika Etemad. <CSS Values and Units Module Level 4>. URL: https://drafts.csswg.org/css-values-4/ |
347 | 362 | [HTML] |
@@ -486,7 +501,7 @@ <h2 title="Introduction">1. 序論</h2> |
486 | 501 | ある疑似類( `animated-image$ps ) |
487 | 502 | を提案する。 |
488 | 503 | ◎ |
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. |
490 | 505 | </p> |
491 | 506 |
|
492 | 507 | <p> |
@@ -516,7 +531,7 @@ <h2 title="Controlling Image Animations: the image-animation property">2. 画像 |
516 | 531 |
|
517 | 532 | <div> |
518 | 533 | ◎名 `image-animation@p |
519 | | -◎値 `normal$v | `paused$v | `running$v |
| 534 | +◎値 `normal$v | `paused$v | `stopped$v | `running$v |
520 | 535 | ◎初 `normal$v |
521 | 536 | ◎適 `内容~画像$【を表現している要素】/`装飾的な画像$を伴う要素 |
522 | 537 | ◎継 される |
@@ -578,6 +593,15 @@ <h2 title="Controlling Image Animations: the image-animation property">2. 画像 |
578 | 593 | 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. |
579 | 594 | </p> |
580 | 595 |
|
| 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 | + |
581 | 605 | <dl> |
582 | 606 | <dt>`normal@v</dt> |
583 | 607 | <dd> |
@@ -621,30 +645,100 @@ <h2 title="Controlling Image Animations: the image-animation property">2. 画像 |
621 | 645 | 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. |
622 | 646 | </dd> |
623 | 647 |
|
624 | | - <dt>`paused@v</dt> |
| 648 | + <dt>`stopped@v </dt> |
625 | 649 | <dd> |
| 650 | +<p> |
626 | 651 | `~animateされる画像$は、 |
627 | 652 | `静的な画像$であったかのように描画される |
628 | 653 | — ~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 と同じになる。 |
630 | 684 | ◎ |
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. |
632 | 686 | </dd> |
633 | 687 |
|
634 | 688 | <dt>`running@v</dt> |
635 | 689 | <dd> |
636 | | -次を除いて `normal$v と同じに挙動する |
| 690 | +`~animateされる画像$の~animationは、 |
| 691 | +`normal$v と同じく稼働する |
| 692 | +— ただし |
637 | 693 | ⇒ |
638 | | -~groupとして同じ時列線に同期されるものは、 |
| 694 | +~groupとして同じ時列線に同期される画像は、 |
639 | 695 | 当の要素の`~animateされる画像$たち(`内容~画像$/`装飾的な画像$たち)に限られる |
640 | 696 | — [ |
641 | 697 | `image-animation$p の算出d値が `running$v をとる他の要素 |
642 | 698 | ]における画像たちは、 |
643 | 699 | 別個な時列線に同期される。 |
644 | 700 | ◎ |
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. |
646 | 740 | ◎ |
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. |
648 | 742 | </dd> |
649 | 743 | </dl> |
650 | 744 |
|
@@ -1008,18 +1102,30 @@ <h2 title="Terminology">4. 各種用語</h2> |
1008 | 1102 | `~program的な画像$を表現する。 |
1009 | 1103 | ◎ |
1010 | 1104 | 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. |
1011 | 1117 | </dd> |
1012 | 1118 | </dl> |
1013 | 1119 |
|
1014 | 1120 | <p class="issue"> |
1015 | 1121 | `video$e 要素が,その`~poster~frame$を表現しているとき、 |
1016 | | -次に挙げる どれとして扱われるベキか? |
| 1122 | +次に挙げる どれとして扱われるベキか? [`13641$issue] |
1017 | 1123 | ⇒# |
1018 | 1124 | `内容~画像$, |
1019 | 1125 | `装飾的な画像$, |
1020 | 1126 | まったく画像ではない`動画$(のある状態) |
1021 | 1127 | ◎ |
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] |
1023 | 1129 | </p> |
1024 | 1130 |
|
1025 | 1131 | </section> |
|
0 commit comments