CSS 이미지 애니메이션 모듈 레벨 1

1. 소개

2. 이미지 애니메이션 제어: image-animation 속성

이 속성은 작성자가 애니메이션 이미지가 애니메이션 상태로 표시될지, 일시정지될지 제어할 수 있게 합니다.

콘텐츠 이미지와 장식 이미지 모두 이 속성의 영향을 받습니다. 한 요소에 여러 장식 이미지 (예: 여러 배경 이미지나 테두리 이미지)가 있거나, 하나의 콘텐츠 이미지와 하나 이상의 장식 이미지가 있을 경우, 해당 요소의 이 속성 계산값이 모두에 영향을 미칩니다.

참고: 따라서 한 요소의 장식 이미지는 일시정지하고 같은 요소의 콘텐츠 이미지는 애니메이션이 실행되도록 하거나, 그 반대로 하는 것은 불가능합니다.

비애니메이션 이미지의 경우, 이 속성의 값은 아무런 영향을 주지 않습니다. 이 속성은 비디오나 프로그래밍 이미지에는 영향을 주지 않습니다.

이 속성이 루트 요소에 적용되면, 배경 장식 이미지에 대한 효과가 캔버스 배경까지 전파됩니다.

참고: 레거시 이유로, 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인 애니메이션 이미지끼리는 하나의 그룹으로 동일 타임라인에 동기화되어야 하며, 다른 요소와는 분리된 타임라인이어야 합니다.

계산값이 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 이미지는 정적 이미지입니다.

애니메이션 이미지

여러 프레임이 최종 시청 경험의 일부로 순차적으로 표시되도록 의도된 이미지이며, 반복(loop)될 수도 있고 아닐 수도 있습니다.

애니메이션 PNG 이미지나, 애니메이션 [GIF] 이미지는 애니메이션 이미지입니다.

점진적 렌더링(progressive rendering) 또는 다중 패스 로딩(multi-pass loading)을 지원한다고 해서 이미지가 애니메이션으로 분류되는 것은 아닙니다.

콘텐츠 이미지

호스트 언어의 요소 중 정적 이미지 또는 애니메이션 이미지를 나타내는 요소이며, 비디오나 프로그래밍 방식 이미지는 제외합니다.

[HTML]의 img 요소(또는 picture 요소 안에 중첩된 경우 포함), [HTML]의 object 요소(이미지를 표현하는 경우), 또는 [SVG2]의 image 요소는 콘텐츠 이미지를 나타냅니다.

(그리고 오직 그 경우에만) 자신의 포스터 프레임을 표현하는 경우, HTML video 요소는 콘텐츠 이미지로 간주됩니다.

장식 이미지

CSS를 통해 문서 렌더링에 삽입되는 이미지로, 예: background-image 또는 border-image 같은 속성을 통해 삽입됩니다.

비디오

호스트 언어의 요소 중 움직이는 그림을 나타내는 요소로, 보통(반드시 그런 것은 아니지만) 소리를 동반하며, 보통(반드시 그런 것은 아니지만) 재생/일시정지/탐색/볼륨 제어/전체 화면 표시 등의 상호작용 컨트롤과 함께 제공되고, (반드시 그런 것은 아니지만) 캡션이나 자막을 동반할 수 있습니다.

참고: 개념적 관점에서, 그리고 오직 파일 형식만을 기준으로 보면, 비디오와 애니메이션 이미지는 상당히 겹치며, 원칙적으로 반드시 서로 구분될 수 있는 것은 아닙니다. 여기서의 구분은 문서에서 요소 선택으로 표현되는 작성자의 의도에 기반합니다.

[HTML]의 video 요소는 비디오를 나타냅니다.

사용자 에이전트가 두 사용 방식 모두를 지원한다고 가정하면, 같은 video/mp4 파일이라도 video 요소로 제시되면 비디오로 간주되고, CSS background-image로 사용되면 장식 이미지로 간주됩니다.

프로그래밍 방식 이미지

외부 리소스에서 로드되는 이미지가 아니라, 호스트 언어의 API를 통해 프로그래밍 방식으로 생성되는 이미지입니다.

[HTML]의 canvas 요소는 프로그래밍 방식 이미지를 나타냅니다.

커버 프레임

일부 애니메이션 이미지 형식은 이미지 제작자가 애니메이션이 실행되지 않을 때 표시할 정적 이미지를 지정할 수 있게 합니다. 이 문서에서는 이를 커버 프레임이라고 부르며, 애니메이션의 초기 상태와는 구별되게 애니메이션이 실행되지 않을 때 표시됩니다.

5. 접근성 고려사항

6. 개인정보 보호 고려사항

7. 보안 고려사항