CSS Image Animation

1. 序論

~animateされる画像 （ `GIF$r, `PNG$r, `WebP$r など により可能化される） は、 ~web上で共通して利用-中にある。 既定では、 ~UAは，これらの画像を自動-再生する。 それは、 利用者にとって — とりわけ，単独の~pageに複数の画像が在る利用事例（例：画像~展示）において — 目障りになり得ることに加え， `WCAG22$r `§ 達成基準： 静止する, 停止する, 隠す＠https://w3c.github.io/wcag/guidelines/22/#pause-stop-hide$ に違反する。 現時点では、 ~site作者は，これに対する制御を有していない。 ◎ Animated images (as enabled by [GIF], [PNG], [WebP]…) are in common use on the web. By default, user agents autoplay these images, which can be jarring for users, especially in use cases where there are multiple images on a single page (e.g. image galleries), and violates WCAG 2.2 § Success Criterion 2.2.2 Pause, Stop, Hide. Currently, site authors have no control over this.

これは、 利用者が，そのような~animationを制御するよう欲することへ至らす。 しかしながら、 用法の多様さに因り［ 利用事例, 欲される［ ~UIと利用者~体験 ］］は広-範囲にわたるので，これを［ 自動的／任意選択可能 ］な~UA特能にするだけでは`足りない＠~CSSWG/css-image-animation-1/explainer#provide-this-as-a-ua-setting$。 ◎ This leads to a user desire to control such animations. However, due to the diversity of usage, there is a wide range of use cases and desired UIs and user experiences, so making this an automatic or opt-in user agent feature would not be sufficient.

利用者に最良な体験を提供するためには，~web~siteは、 ~animateされる画像の各~異なる利用に応じて別々に，再生~体験を制御する必要がある。 ◎ To offer their users the best experience, websites need to control the playback experience, separately for each different uses of animated images.

この仕様は、［ そのような~animationを制御すること ］および［ 関連な要素を［ この制御, それに結付けるよう望む~UI ］の~targetにすること ］を作者に可能化するため， ある~prop（ `image-animation$p ）, ある疑似類（ `animated-image$ps ） を提案する。 ◎ 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.

この論題に関する［ 動機, 考慮された代替たち ］を成す更なる探求は、 別々に保守されている［ `説明書き＠~CSSWG/css-image-animation-1/explainer$, `呈示＠https://github.com/webplatformco/project-image-animation/tree/main/image-animation-property$ ］も見よ。 ◎ For further exploration of the motivations and of the alternatives considered, see also the separately maintained explainer and presentation on this topic.

この仕様には、 画像~animationを大域的に制御するための設定 — `~animateされる画像$すべてを`静的な画像$へ転じるための~optionなど — を利用者に提供している~UAを予め除外するものは無い。 ◎ Nothing in this specification precludes user agents offering users a setting to control image animation globally, such as an option to turn all animated images into static images.

2. 画像~animationの制御-法： `image-animation^p ~prop

この~propは、 `~animateされる画像$が［ ~animateされた状態, 静止された状態 ］どちらで表示されるか制御することを作者に許容する。 ◎ This property allows authors to control whether animated images are displayed in their animated state or paused.

この~propは、［ `内容~画像$, `装飾的な画像$ ］どちらにも影響する。 ある要素が，そのような画像を複数個~包含するとき — 当の要素が複数個の`装飾的な画像$（例：背景~画像や~border画像）を伴うとき／ 当の要素が`内容~画像$を表現すると同時に 1 個以上の`装飾的な画像$も伴うとき — は、 当の要素の この~propの`算出d値$は，それらすべてに影響する。 ◎ Both content images and decorative images are affected by this property. When an element contains several decorative images (e.g. multiple background images or border images), or if it contains both a content image and one or more decorative images, the computed value of the property on that element affects them all.

注記： したがって、 ある要素において［ `内容~画像$の~animationが稼働している間に`装飾的な画像$を静止する ］こと, および その逆は，アリでない。 ◎ Note: It is therefore not possible to pause decorative images of an element while letting the animation run on the content image of the same element, nor vice-versa.

`~animateされる画像$でない画像に対しては、 この~propの各種~値による効果は無い。 この~propは、 `動画$にも`~program的な画像$にも影響しない。 ◎ 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.

`normal@v

`~animateされる画像$の~animationは、 通常に — ［ 画像~形式, ~host言語† ］により決定されるとおりに — 稼働する。 ◎ The animation of animated images is run normally, as determined by the image format and the host language.

【 この仕様に現れる “~host言語” は、 実際には［ `~host言語$ではなく，`文書~言語$ ］を意味するであろう。 】

更には、［ 当の要素, `image-animation$p の算出d値が `normal$v をとる他の要素 ］の`~animateされる画像$たちのうち［ 同じ`絶対~URL$, 同じ画像~data ］を伴うものどうしは，~groupとして同じ時列線に同期されるよう描画するモノトスル — この時列線は、 当の~groupに最初に画像が追加された時点に開始するとする。 ◎ Further, all animated images with the same absolute URL, the same image data, and with an image-animation computed value of normal' must be rendered synchronized to the same timeline as a group, with the timeline starting at the time of the least recent addition to the group.

注記： 上の要件は、 `HTML$r の`具現化に対する期待＠~HTMLrendering#expected$のうち， その `§ 画像＠~HTMLrendering#images-3$ において定義されるものに基づく。 `HTML$r は、 一般に，文書を特定0の仕方で呈示するよう~UAに要求しない — したがって，上の挙動を規範的には要求しない。 この仕様は、 それを要求する。 ◎ 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.

`paused@v

`~animateされる画像$は、 `静的な画像$であったかのように描画される — ~UAは、 それが包含する~animationを稼働しないモノトスル。 ◎ Animated images are rendered as if they were static images: the user agent must not run any animation it contains.

`running@v

次を除いて `normal$v と同じに挙動する ⇒ ~groupとして同じ時列線に同期されるものは、 当の要素の`~animateされる画像$たち（`内容~画像$／`装飾的な画像$たち）に限られる — ［ `image-animation$p の算出d値が `running$v をとる他の要素 ］における画像たちは、 別個な時列線に同期される。 ◎ Like normal, the animation of animated images is run normally, as determined by the image format and the host language, ◎ 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.

:root { /* 
継承により，文書~内を伝播する
◎
propagates through the document by inheritance
 */
  image-animation: paused;
}
img {
  image-animation: normal;
}

`image-animation$p ~propは、 ~raster画像~形式のみならず，~vector画像（例： ~SVG `SVG2$r ）にも影響する。 しかしながら、 これに該当し得るものは［ `内容~画像$／`装飾的な画像$ ］として読込まれる~SVG資源に限られ， ~HTML文書の中へ~inline化された `svg$e 要素は含まれない （しかしながら，この~propは継承されるので、 `svg$e 要素に設定された場合には， ~SVG `image$e 要素を介して読込まれた`内容~画像$のうち`~animateされる画像$に影響する）。 ◎ The image-animation property affects not only raster image formats, but also to vector images, including SVG (see [SVG2]). However, this is only the case for distinct SVG resources loaded as content images or decorative images, and does not include svg elements inlined into HTML documents. (However, if set on the svg element, it does inherit, and does affect any animated content image loaded via the SVG image element.)

3. ~animateされる画像の~~選択法： `animated-image^ps 疑似類

`animated-image@ps 疑似類は、［ `内容~画像$を表現する要素のうち，`~animateされる画像$が読込まれたもの ］を表現する。 この疑似類が合致するためには、 当の画像の形式に~animation能力があることのみならず， 実際に~animateされる画像であることも要求される【！must】。 ◎ The :animated-image pseudo-class represents content image elements where a animated image has been loaded. For the animated-image pseudo-class to match, the image must not only be in a format that is capable of animation, but must also be an actually animated image.

`animated-image^ps 疑似類は、 `内容~画像$を表現しない要素には，決して合致しない。 ◎ On elements which do not represent content images, the animated-image pseudo-class never matches.

img:animated-image {
  image-animation: paused;
  filter: grayscale(10%) contrast(50%) brightness(80%);
}
img:animated-image:hover,
img:animated-image:focus {
  filter: none;
  image-animation: running;
}

function setImageFocusability(%event) {
  var %img = %event.target;
  if (%img.matches(":animated-image") {
    %img.tabIndex = 0;
  } else {
    %img.removeAttribute("tabindex");
  }
}
document.querySelectorAll("img").forEach( (%i) => {
  setImageFocusability({target: %i });
  %i.addEventListener('load', setImageFocusability);
  %i.addEventListener('error', setImageFocusability);
});

`animated-image$ps が合致するかどうかには、［ 当の画像の再生-中における現在の状態, `image-animation$p ~propの値 ］どちらも影響しない。 しかしながら， 何らかの~UA設定により画像~animationが大域的に不能化された場合、 他では~animateされ得る画像であっても`静的な画像$であるものと見なされ， 合致しない。 ◎ Whether :animated-image matches is not affected by the current playing state of the image, nor by the value of the image-animation property. However, if some user agent setting has globally disabled image animations, even images that could otherwise be animated are considered static images, and do not match.

4. 各種用語

`静的な画像@ ◎ static image

最終的に視られる体験として，単独の~frameが表示されることが意図された画像。 ◎ Images where a single frame is intended to be displayed as the final viewing experience.

例： ~JPEG画像は、`静的な画像$である。 ◎ A JPEG image is a static image.

`~animateされる画像@ ◎ animated image

最終的に視られる体験を成す一部として， 複数の~frameが連列的に表示されることが意図される画像 — 場合によっては，~loopするものもあるが、 その限りではない。 ◎ Images where multiple frames are intended to be displayed sequentially as part of the final viewing experience, possibly though not necessarily looping.

例： `~animateされる~PNG画像＠https://w3c.github.io/png/#dfn-animated-png$, ~animateされる `GIF$r 画像は、 `~animateされる画像$である。 ◎ An animated PNG image, or an animated [GIF] image are animated images.

漸進的な描画など，複数段階を経る読込ng用の~supportは、 画像を`~animateされる画像$として選抜させるものではない。 ◎ Support for progressive rendering or multi-pass loading does not make an image qualify as animated.

`内容~画像@ ◎ content image

~host言語を成す【画像を表現し得るものとして定義された】要素が表現している［ `静的な画像$／`~animateされる画像$ ］ — `動画$や`~program的な画像$は、 除外される。 ◎ An element of the host language representing a static image or an animated image, at the exclusion of videos or programmatic images.

例： 次に挙げるものが表現している画像 ⇒＃ `img$e 要素 `HTML$r（ `picture$e 要素~内に入子にされたものも含む）／ `object$e 要素 `HTML$r のうち画像を`表現-$するもの／ `image$e 要素 `SVG2$r ◎ The img [HTML] element, including when it is nested in the picture element; the object [HTML] element, in cases where it represents an image; or the image [SVG2] element represent content images.

`装飾的な画像@ ◎ decorative image

~CSSにより文書~具現化の中へ挿入された画像 （例： `background-image^p や `border-image^p などの~propを通して）。 ◎ An image inserted into the document rendering by CSS, through such properties as background-image or border-image.

`動画@ ◎ video

~host言語を成す【動画~frameを表現し得るものとして定義された】要素のうち，動く絵を表現しているもの：

• 概して，音響が付随するが、 その限りではない。
• 概して，ヤリトリありな~control （再生する, 静止する, ~seekする, 音量を制御する, 全screenに呈示する, など用の） を伴って呈示されるが、 その限りではない。
• 場合によっては，~captionや字幕が付随するが、 その限りではない。

◎ An element of the host language representing a moving picture, typically though not necessarily accompanied by sound, typically though not necessarily presented with interactive controls (for playing, pausing, seeking, controlling the volume, presenting in full screen…), possibly though not necessarily accompanied by captions or subtitles.

注記： 概念的な~~観点からは、 `動画$と`~animateされる画像$には — それらの~file形式に基づく限り — かなり重なる部分があり、 原理的には，互いを判別し得るとは限らない。 ここでの区別は、 作者の意図 — 文書に利用する要素を選ぶことを通して表出された意図 — に基づく。 ◎ Note: From a conceptual point of view, and only based on file formats, videos and animated images have considerable overlap, and cannot not necessarily be distinguished from one another in principle. The distinction here is based on author intent, as expressed through the choice of element in the document.

例： `video$e 要素 `HTML$r は`動画$を表現する。 ◎ The video [HTML] element represents a video.

同じ `video/mp4^c ~fileであっても、［ `video$e 要素を介して呈示された場合には`動画$／ `background-image^p として利用された場合には`装飾的な画像$ ］であるものと見なされる — ~UAが，どちらの用法も~supportするものと見做すなら。 ◎ Assuming a user agent which would support both usages, the same video/mp4 file would be considered a video if presented via the video element, or a decorative image if used as a CSS background-image.

`~program的な画像@ ◎ programmatic image

~host言語の~APIを介して~program的に作成された画像 — 外部~資源から読込まれたものではなく。 ◎ An image created programmatically via an API of the host language, as opposed to one loaded from an external resource.

例： `canvas$e 要素 `HTML$r は、 `~program的な画像$を表現する。 ◎ The canvas [HTML] element represents a programmatic image.

`video$e 要素が，その`~poster~frame$を表現しているとき、 次に挙げる どれとして扱われるベキか？ ⇒＃ `内容~画像$, `装飾的な画像$, まったく画像ではない`動画$（のある状態） ◎ 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?

5. ~accessibilityの考慮点

• この仕様により導入される特能は、 他では `WCAG22$r `§ 達成基準： 静止する, 停止する, 隠す＠https://w3c.github.io/wcag/guidelines/22/#pause-stop-hide$ に違反するものに取組むことを作者に可能化する。 ◎ The features introduced by this specification enable authors to address what would otherwise be a violation of WCAG 2.2 § Success Criterion 2.2.2 Pause, Stop, Hide.
• ~web~pageは、 すでに，~animateされる画像を包含し得ることに加え、 すでに，適切な代替~textが — `alt$a 属性により — 供されるものと期待されている。 ~animationの［ 静止-法／再開-法 ］を収容するために【作者に】期待される変更は無く，必要yでない。 【代替~textにおける】［ “漫画的な，落ちてきた鉄槌でぺしゃんこにされた犬” ／ “かわいいハムスターが踊っている” ／ “構築中…” ／ “回転している読込ng指示子” ］の様な記述は、 ~animationが稼働していようがいまいが，等しく［ 適切かつ想像をかきたてるもの ］であり続ける。 ◎ Web pages can already contain animated images, and appropriate alt text is already expected to be provided. No change is expected nor necessary to accommodate for pausing/resuming animations. Descriptions like ”Cartoon coyote being squashed by a falling anvil“, “cute dancing hamster”, “under construction”, or “rotating loading indicator” remain equally appropriate and evocative whether the animation is running or not.
• 現時点では、 ~screen-readerは，概して［ ~animateされる画像を~animateされない画像と違えて発声する ］ことを選んでいない。 類似に，［ 静止された画像, 再生している画像 ］を違えて発声することは期待されていない。 いずれも、 そうする方が望ましいことが見出されたなら，実装され得るが。 ◎ Currently, screen readers typically do not chose to announce animated images differently from non-animated images, though this could be implemented if found desirable. Similarly, it is not expected that they would announce paused or playing images any differently, though this could be implemented if found desirable.

• `§ ~animateされる画像の~~選択法＠#animated-image-pseudo$ において論じたとおり、 画像~animationを制御するための~UIを築いている作者は， ~access可能な~UIを築くための通例的な予防策を講じる必要がある。 ~CSSにおいて要素を直に~focus可能にすることは，アリでないので、 適正な~keyboard~naviには，要素の属性も設定することが要求されることになる。 代替な解決策は、［ `animated-image$ps 疑似類に合致する要素に対し，作者が自前の~UIを築ける ］ように［ する代わりに／することに加えて ］，［ 適切なときには~UI自体を供するよう，~UAに指図する ］ことを作者に可能化することになろう。 ◎ As discussed in § 3 Telling Animated Images Apart: the :animated-image pseudo-class, authors building UI to control image animation need to take the usual precautions in order to build an accessible UI. As it is not possible to directly make an element focusable in CSS, proper keyboard navigation will require element attributes to be set as well. An alternative solution, instead or in addition to letting authors build their own UI on elements where the :animated-image pseudo class matches, would be to enable authors to instruct the user agent to provide the UI itself when appropriate.

  例えば、 `image-animation$p ~prop用の追加的な値として `controlled^v を定義することもできた — 指定されたときは、 次に従うことになるような： ◎ For example, an additional controlled value for the image-animation property could be defined. When this value would be specified,＼

  • 当の画像~animationは，初期~時は `paused$v が指定されたかのように稼働しなくなる。 ◎ initially, the image animation would not run, as if paused has been specified.＼

  • 加えて，下層の`内容~画像$が実際に`~animateされる画像$である場合、 ~UAは：

    • その~animationを［ 再生する, 静止する ］ことを利用者に許容するための，何らかの~UIを供する。
    • 当の要素を~focus可能にする。
    ◎ Additionally, if the underlying content image actually is an animated one, the user agent would provide some UI to allow the user to play and pause the animation, and would also make the element focusable.

  これは、 必要yなら，この仕様の後の~versionに追加され得る。 しかしながら、 これが作者たちから広く利用されるかどうかは，不確かである — 彼らは、 自身の~siteに特定的に誂えられた~UI制御を設計する方を選好することが多いので。 したがって、 この仕様は，［ 作者たちの需要が確認されるまでは、 そのような解決策の複階性に関して作業すること ］を先送りすることを選んだ。 ◎ If necessary, this can be added to a later version of this specification. However, it is uncertain whether authors would broadly use this, as they frequently prefer to design UI controls specifically tailored to their site. This specification therefore chose to defer working out the complexity of such a solution until author demand is confirmed.

6. ~privacyの考慮点

`image-animation$p ~propは、 非同一-生成元な画像~animationに対する制御を可能化する — 当の画像が実際に~animate可能か否かについての情報を漏洩することなく。 その算出d値が，この情報に基づいて変化することはない。 その値 `running$v の視覚的な効果は，`~animateされる画像$と`静的な画像$で異なるが、 その相違は，~pageからは観測-可能にならない。 ◎ The image-animation property enables control over image animation cross origin, without leaking any information about whether the image is actually animatable or not. The computed value does not change based on this information. The running value has effects that are visibly different on animated images vs static images, but none of these differences are observable by the page itself.

しかしながら， `animated-image$ps 疑似類は、 `内容~画像$が［ `~animateされる画像$, `静的な画像$ ］どちらなのかを露呈する — そのことは、 他では，当の~pageが非同一-生成元【な画像】から知り得るものではない。 これは，~CORSを介して制約することもできるが、 次に挙げる理由から，この仕様は そのような制約を課さないことを選んだ： ◎ However, the :animated-image pseudo class does reveal whether a content image is animated or static, which the page could not otherwise know cross-origin. This could be restricted via CORS, but this specification chose not to impose such restriction, for the following reasons:

• この情報から得られるものは、 すでに既知なもの以外に大してない： ◎ There is not much to be gained from this information that isn’t already known.

  • ある画像が~target~URLに在るか否かは， 利用者についての重要な情報を露呈し得るが （例：利用者が特定0の~domainに~log-inしたかどうか）、 そのことは，すでに画像の寸法から知り得る†ことに加え、 ~animate能は，この~riskを有意義に~~増やすものではない。 【†たぶん， `HTMLImageElement＠~HEimages#htmlimageelement$c ~interfaceの `width^c 属性などが 0 か否か検査することにより。】 ◎ Whether an image is present at the target URL at all can reveal important information about the user (e.g. whether they are logged in in a particular domain), but that is already knowable from image dimensions, and animatability does not meaningfully add to this risk.
  • 実施においては、 ある~siteが同じ~URLから［ 静的~画像, ~animateされる画像 ］どちらも~serveするよう設計されていて， どちらを~serveするかを［ 何らかの利用者に依存する私的な情報 ］に基づいて選ぶこと — それにより漏洩されるようになること — は，まず見込まれない。 ◎ It is in practice very unlikely that a site would be designed to serve both a static and an animated image from the same URL, choosing which to serve based on some user-dependent private information which would thereby get leaked.
• 類似な情報は、 動画~用には，すでに共有されている — `video$e 要素 `HTML$r は、 非同一-生成元な動画~用であっても，所要時間を公開する。 静的な画像は，~animateされる画像を成す特別な事例 — それらのうち所要時間 0 を伴うもの — と言えるので、 その情報を公開することは，動画と相似的である。 ◎ Similar information is already being shared for videos: the HTML video element exposes duration even for cross-origin videos. A static image is arguably a special case of an animated one with a duration of 0, so exposing that information is analogous.
• 画像を `video$e 要素にも許容する提案がある。 実装された場合，相似的では済まない状況を意味するが、 いずれにせよ，画像が~animateされるかどうかは、 すでに，非同一-生成元【な画像】であっても知り得ることになる。 ◎ There is a proposal to allow images in the <video> element. If implemented, it means the situation would not just be analogous, but that whether an image is animated would already be knowable cross-origin anyway.

7. ~securityの考慮点

この仕様が導入する新たな~securityの課題として既知なものは無い。 ◎ This specification is not known to introduce any new security issue.