키프레임에 설정된 style과 요소에게 기본적으로 적용한 style과의 관계를 설정한다.
<single-animation-fill-mode>#
<animation-name>
설정 수에 따라 하나 이상의 <single-animation-fill-mode>
을 콤마로 구분해서 작성할 수 있다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다. 즉 애니메이션이 시작되기 전과 끝난 후의 적용되는 값에 대한 정의를 나타낸다.
none | forwards | backwards | both
웹페이지의 로드가 완료되면 선택자에 적용한 기본 style이 아닌 애니메이션 첫 키프레임의 style을 갖게 되며 애니메이션이 끝나면 선택자에 지정한 기본 style로 복귀한다.
웹페이지의 로드가 완료되면 첫 번째 키프레임의 style을 갖게 되며 애니메이션이 끝나면 마지막 키프레임의 style을 유지한다.
애니메이션 시작 전까지는 선택자에 설정한 style로 대기하고 애니메이션이 끝나면 마지막 키프레임에서 설정한 style을 유지한다.
애니메이션 시작 전까지 선택자에 설정한 style 가지고 대기하고 애니메이션이 끝나면 다시 선택자에 지정한 style로 돌아간다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
애니메이션 시작 전까지 선택자에 설정한 style 가지고 대기하고 애니메이션이 끝나면 다시 선택자에 지정한 style로 돌아간다.
웹페이지의 로드가 완료되면 선택자에 적용한 기본 style이 아닌 애니메이션 첫 키프레임의 style을 갖게 되며 애니메이션이 끝나면 선택자에 지정한 기본 style로 복귀한다.
웹페이지의 로드가 완료되면 첫 번째 키프레임의 style을 갖게 되며 애니메이션이 끝나면 마지막 키프레임의 style을 유지한다.
애니메이션 시작 전까지는 선택자에 설정한 style로 대기하고 애니메이션이 끝나면 마지막 키프레임에서 설정한 style을 유지한다.
animation-fill-mode: both;
object.style.animationFillMode = "both";
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Animations Level 1 | 초안 작업 | Last review date: 2022-12-6 |