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

1. 소개

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

이 속성을 사용하면 작성자는 애니메이션 이미지가 애니메이션 상태로 표시될지 일시 중지될지를 제어할 수 있습니다.

요소에 여러 선언적 이미지가 포함되어 있으면 (예: 배경 이미지나 테두리 이미지가 여러 개인 요소, 또는 이미지를 나타내는 호스트 언어의 대체 요소로서 CSS를 통해 하나 이상의 이미지도 연결되어 있는 요소), 해당 요소에서 이 속성의 계산값은 모든 이미지에 영향을 줍니다.

참고: 따라서 요소에 포함된 일부 이미지의 애니메이션만 일시 중지하고 같은 요소의 다른 이미지에서는 애니메이션이 계속 실행되도록 할 수 없습니다.

애니메이션이 없는 이미지의 경우 이 속성의 값이 달라도 아무런 영향을 미치지 않습니다. 이 속성은 비디오나 프로그래밍 방식의 이미지에도 영향을 미치지 않습니다.

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

참고: 기존 호환성상의 이유로 background 속성은 루트 요소뿐만 아니라 HTML body 요소에서도 전파됩니다. 그러나 image-animation과 같은 새로운 속성은 오직 루트 요소에서만 전파됩니다. 이 속성을 body에 설정해도 전파되지 않으며, background가 해당 요소에 설정되어 있어도 마찬가지입니다.

normal

애니메이션 이미지의 애니메이션은 이미지 형식과 호스트 언어에 따라 정상적으로 실행됩니다.

또한 동일한 애니메이션 이미지 중 절대 URL이 같고, 이미지 데이터가 같으며, image-animation의 계산값이 normal인 이미지들은 하나의 그룹으로 동일한 타임라인에 동기화하여 렌더링해야 하며, 타임라인은 그룹에 가장 먼저 추가된 시점에 시작됩니다.

참고: 위 요구 사항은 [HTML]의 렌더링 기대 동작을 바탕으로 하며, 이는 HTML § 15.4.2 이미지에 정의되어 있습니다. [HTML]은 일반적으로 사용자 에이전트가 문서를 특정 방식으로 표시하도록 요구하지 않으므로, 위 동작도 규범적으로 요구하지 않습니다. 그러나 이 명세에서는 이를 요구합니다.

stopped

애니메이션 이미지는 정적 이미지인 것처럼 렌더링됩니다. 사용자 에이전트는 이미지에 포함된 애니메이션을 실행해서는 안 됩니다. 이미지에 표지 프레임이 포함되어 있으면 사용자 에이전트는 해당 프레임을 사용해야 합니다. 그렇지 않으면 애니메이션의 초기 상태에서 표시될 이미지를 표시해야 합니다.

paused

사용자 에이전트는 애니메이션 이미지에 포함된 애니메이션을 실행해서는 안 되며, 이 값이 적용되기 시작했을 때의 이미지 상태를 계속 표시해야 합니다. 결과적으로 애니메이션이 일시 중지됩니다.

이 값이 적용되기 전에 애니메이션이 재생되고 있지 않았다면 동작은 stopped와 같습니다.

running

normal과 마찬가지로 애니메이션 이미지의 애니메이션은 이미지 형식과 호스트 언어에 따라 정상적으로 실행됩니다.

그러나 애니메이션 타임라인은 요소별로 구분됩니다. 단일 요소에 포함된 모든 이미지 중 image-animation의 계산값이 running인 이미지들 가운데, 애니메이션 이미지가 동일한 절대 URL과 동일한 이미지 데이터를 가지면 하나의 그룹으로 동일한 타임라인에 동기화하여 렌더링해야 하며, 이 타임라인은 다른 요소에 포함된 이미지의 타임라인과 구별됩니다.

계산값이 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 속성의 값에 영향을 받지 않습니다. 그러나 사용자 에이전트의 특정 설정으로 이미지 애니메이션이 전역적으로 비활성화된 경우, 해당 설정이 활성화되어 있으면 사용자 에이전트는 원래 애니메이션 이미지지만 재생이 억제된 이미지를 정적 이미지로 취급하여 :animated-image와 일치하지 않도록 할 수 있습니다.

4. 용어

정적 이미지

최종적인 표시 결과로 단일 프레임을 표시하도록 의도된 이미지입니다.

JPEG 이미지는 정적 이미지입니다.

애니메이션 이미지

최종적인 표시 결과의 일부로 여러 프레임을 순차적으로 표시하도록 의도된 이미지이며, 반복 재생될 수도 있지만 반드시 그럴 필요는 없습니다.

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

점진적 렌더링이나 다중 패스 로딩을 지원한다고 해서 이미지가 애니메이션 이미지로 인정되는 것은 아닙니다.

선언적 이미지

호스트 언어의 대체 요소로서 정적 이미지나 애니메이션 이미지를 나타내지만, 비디오나 프로그래밍 방식의 이미지는 제외하는 요소, 또는 CSS를 통해 문서 렌더링에 삽입된 이미지입니다.

img [HTML] 요소는 picture 요소 안에 중첩된 경우를 포함하며, 이미지로 표현되는 경우의 object [HTML] 요소나 image [SVG2] 요소도 선언적 이미지이며, background-image 또는 border-image와 같은 속성이나 content 속성을 통해 삽입된 이미지도 마찬가지입니다.

HTML video 요소가 포스터 프레임을 나타내는 경우에는 (그리고 오직 그 경우에만) 선언적 이미지로 간주됩니다.

비디오

움직이는 영상을 나타내는 호스트 언어의 대체 요소로, 일반적으로 소리가 함께 제공되지만 반드시 그럴 필요는 없으며, 일반적으로 상호 작용 컨트롤이 제공되지만 반드시 그럴 필요는 없습니다. (재생, 일시 중지, 탐색, 음량 조절, 전체 화면 표시 등) 자막이나 캡션이 함께 제공될 수도 있지만 반드시 그럴 필요는 없습니다.

참고: 개념적인 관점에서 파일 형식만을 기준으로 보면 비디오와 애니메이션 이미지는 상당 부분 겹치며, 원칙적으로 서로 구별할 수 없는 경우도 있습니다. 여기서의 구분은 문서에서 선택한 요소를 통해 표현되는 작성자의 의도에 근거합니다.

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

두 가지 사용 방식을 모두 지원하는 사용자 에이전트를 가정하면 동일한 video/mp4 파일이라도 video 요소를 통해 표시하면 비디오로 간주되고, CSS background-image로 사용하면 선언적 이미지로 간주됩니다.

프로그래밍 방식의 이미지

외부 리소스에서 로드하는 대신 호스트 언어의 API를 통해 프로그래밍 방식으로 생성된 이미지입니다.

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

표지 프레임

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

5. 접근성 고려 사항

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

7. 보안 고려 사항

8. 변경 사항

2026년 4월 9일 최초 공개 작업 초안 이후의 변경 사항

• 콘텐츠 이미지와 장식 이미지의 구분을 제거했습니다. (이슈 13783), (이슈 13440)
• 정보 노출에 관한 설명을 명확히 했습니다(현재는 정보가 노출되지 않지만 필요하다면 노출할 수 있습니다).
• 의사 클래스와 전역 설정 사이의 상호 작용을 논의했습니다. (PR 14388)