Style animationFillMode 속성

정의와 사용법

animationFillMode 속성은 애니메이션이 재생되지 않을 때(애니메이션이 끝나거나 "지연"이 있을 때) 요소에 적용되는 스타일을 정의합니다。

기본적으로, CSS 애니메이션은 첫 번째 키 프레임을 "재생"하기 전에 진행 중인 애니메이션 요소에 영향을 미치지 않으며, 마지막 키 프레임이 완료되면 영향을 멈춥니다。animationFillMode 속성이 이 동작을 대체할 수 있습니다。

예제

<div> 요소의 animationFillMode 속성 변경：

document.getElementById("myDIV").style.animationFillMode = "forwards";

직접 시도해보세요

문법

animationFillMode 속성 반환：

object.style.animationFillMode

animationFillMode 속성 설정：

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

속성 값

값 설명
none 기본 값。애니메이션이 실행되기 전이나 후에도 목표에 대한 어떤 스타일도 적용되지 않습니다。
forwards 애니메이션이 끝나면(animation-iteration-count에 의해 결정됨), 애니메이션이 끝났을 때 이 속성 값을 적용합니다。
backwards

animation-delay가 정의된 시간 동안, 애니메이션은 애니메이션의 첫 번째 반복에서 시작하는 키 프레임에 정의된 속성 값을 적용합니다。

이것들은 키 프레임의 값(애니메이션 방향이 "normal" 또는 "alternate" 일 때) 또는 키 프레임으로의 값(애니메이션 방향이 "reverse" 또는 "alternate-reverse" 일 때)입니다。
both 애니메이션은 앞으로와 뒤로의 규칙을 따릅니다.也就是说，它将在两个 directions上扩展 animation properties.
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 부모 요소에서 이 속성을 상속합니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： none
반환 값： 문자열로 표현된 요소의 animation-fill-mode 속성。
CSS 버전： CSS3

브라우저 지원

animationFillMode CSS3 (1999) 기능입니다.

모든 브라우저가 완전히 지원합니다：

크롬 에지 파이어폭스 사파리 오페라 IE
크롬 에지 파이어폭스 사파리 오페라 IE
지원 지원 지원 지원 지원 11

관련 페이지

CSS 참조 매뉴얼：animation-fill-mode 속성