CSSイメージアニメーションモジュール レベル 1

1. イントロダクション

2. 画像アニメーションの制御：image-animation プロパティ

このプロパティにより、制作者は アニメーション画像を アニメーション状態で表示するか 一時停止状態で表示するかを制御できます。

コンテンツ画像および装飾画像 の両方がこのプロパティの影響を受けます。 要素内に複数の装飾画像 （例：複数の背景画像やボーダー画像） またはコンテンツ画像と1つ以上の装飾画像がある場合、 その要素のこのプロパティの算出値が全てに影響します。

注記: よって、要素の 装飾画像のみを 一時停止し、同じ要素のコンテンツ画像のアニメーションだけを再生したり、 逆の操作をすることはできません。

非アニメーション画像の場合は、 このプロパティの値を変えても効果はありません。 また、このプロパティは動画やプログラムによる画像 には影響しません。

このプロパティがルート要素 に適用された場合 その効果は背景の装飾画像についてキャンバス背景 にも伝播します。

注記: 互換性のため、 backgroundプロパティはルート要素だけでなく HTMLの body 要素からも伝播します。 しかし、image-animation のような新しいプロパティはルート要素のみから伝播します。 body に設定しても、 そこにbackgroundが指定されている場合であっても 伝播はしません。

normal

アニメーション画像 のアニメーションは、画像フォーマットやホスト言語により 通常通り再生されます。

さらに、 同じアニメーション画像で絶対URL・画像データが同一で かつ算出値image-animation がnormal のものは 全てグループとして同じタイムライン上で同期再生しなければなりません。 タイムラインはグループ内で最も早く追加された時点から始まります。

注記: 上記要件は [HTML]で HTML § 15.4.2 Imagesに規定されるレンダリング期待値に基づきます。 ただし[HTML]は 文書の具体的な表示方法を通常必須とはしていませんので 上記の挙動は規範的ではありません。 本仕様はこれを規範要件とします。

stopped

アニメーション画像は 静止画像 として描画されます。 ユーザーエージェントはアニメーションを再生してはなりません。 カバーフレーム を含む場合はそのフレームを表示しなければならず、 それ以外の場合はアニメーションの初期状態で画像を表示します。

paused

ユーザーエージェントは アニメーション画像に 含まれるアニメーションを 再生してはなりません。 この値の適用開始時点で表示されていた画像のまま アニメーションを事実上「一時停止」します。

この値が適用されるまでアニメーションが再生されていなかった場合、 挙動はstoppedと同じです。

running

normal と同様に アニメーション画像 のアニメーションが画像フォーマットやホスト言語に従って 通常通り再生されます。

ただし、アニメーションタイムラインは要素ごとにスコープされます： 単一要素内のコンテンツ画像および 装飾画像の間では 同じ絶対URLかつ同じ画像データ、 かつimage-animation算出値がrunningのものは ひとまとまりのグループとして同期再生されますが、 他要素中の画像とはタイムラインが別になります。

この値が適用されている間に画像が要素に追加された場合、 タイムラインはグループ内で新たに最も早く追加された時点から開始します。

要素がdisplay: none から作成または表示され、 すでに画像が追加されており、かつ image-animation がrunningの場合、 タイムラインはレイアウトに加えられた時点から開始します。

このプロパティを他の値から running に切り替えた場合は アニメーションは切り替え時点で表示されていた状態から続行となるよう タイムラインの開始位置を調整します。

:root { /* 継承により文書全体に伝播 */
  image-animation: paused;
}
img {
  image-animation: normal;
}

image-animationプロパティは ラスター画像形式だけでなく ベクター画像（SVGも含みます。[SVG2]参照）にも影響します。 ただし、独立リソースとして読み込まれたコンテンツ画像や装飾画像のSVGが該当し、 HTML文書中にインラインで記述された svg 要素には適用されません。 （ただし svg 要素に設定すれば継承し、 SVGの image 要素で読み込んだ アニメーション コンテンツ画像 には影響します。）

3. アニメーション画像の識別：:animated-image 疑似クラス

:animated-image疑似クラスは、コンテンツ画像要素のうち アニメーション画像 が読み込まれているものを表します。 animated-image疑似クラスにマッチするには、 アニメーション可能な形式であるだけでなく、 実際にアニメーション画像でなければなりません。

コンテンツ画像でない要素には animated-image疑似クラスは決してマッチしません。

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にマッチするかどうかは 画像の現在の再生状態や image-animationプロパティの値には影響されません。 ただしユーザーエージェントの設定で画像アニメーションが全体的に無効化されている場合は、 アニメーション可能な画像であっても静止画像とみなされ、マッチしません。

4. 用語

静止画像

単一フレームのみを 最終的な表示体験として 表示するよう意図された画像。

JPEG画像は静止画像です。

アニメーション画像

複数フレームを 最終的な表示体験の一部として連続表示することを 意図した画像であり、 ループする場合もしない場合もあります。

アニメーションPNG画像や アニメーション[GIF]画像は アニメーション画像です。

プログレッシブレンダリングやマルチパス読み込みへの対応があるだけでは、 アニメーションとはみなされません。

コンテンツ画像

静止画像または アニメーション画像を 表現するホスト言語の要素。ただし 動画や プログラム画像は除きます。

img [HTML]要素（ picture 要素内にネストされている場合も含む）、 object [HTML]要素（画像を 表現する場合）、 および image [SVG2] 要素がコンテンツ画像にあたります。

HTML video 要素は、ポスターフレームを表す場合（かつその場合のみ）、 コンテンツ画像 とみなされます。

装飾画像

background-imageや border-imageなどのCSSプロパティを通じて 文書レンダリングに挿入される画像。

動画

ホスト言語において動画（動く画像）を表す要素。 通常、音声を伴う場合もあるが必須ではなく、 再生・一時停止・シーク・音量調整・全画面表示などの インタラクティブなコントロールが伴う場合もある。 また、キャプションや字幕を伴うこともある。

注記: 概念的には、ファイルフォーマットだけに注目すると 動画とアニメーション画像の区別は 実質的な重なりが多く 原理的に区別できないこともある。 ここでの区別は文書内でどの要素を使うかという 制作者の意図に依存します。

video [HTML]要素は 動画を表します。

どちらの用途にも対応するユーザーエージェントが想定される場合、 同一のvideo/mp4ファイルが video 要素で表示されるときは 動画、 CSSのbackground-imageとして利用される場合は 装飾画像 となります。

プログラム画像

ホスト言語のAPIを利用してプログラム的に生成された画像。 外部リソースから読み込まれる画像とは区別される。

canvas [HTML]要素は プログラム画像を表します。

カバーフレーム

一部のアニメーション画像 形式では、 画像作者が静止画像 を指定することができ、この文書ではそれを カバーフレーム と呼びます。 アニメーションが再生されていないときに 初期状態とは別に表示されるフレームです。

5. アクセシビリティに関する考慮事項

6. プライバシーに関する考慮事項

7. セキュリティに関する考慮事項