Properties

Properties

Draft
  • account_tree
  • bug_report

animation-fill-mode

키프레임에 설정된 style과 요소에게 기본적으로 적용한 style과의 관계를 설정한다.

설정 가능한 속성 값

  • none기본값키워드CSS3

    애니메이션 시작 전까지 선택자에 설정한 style 가지고 대기하고 애니메이션이 끝나면 다시 선택자에 지정한 style로 돌아간다.

  • forwards키워드CSS3

    애니메이션 시작 전까지는 선택자에 설정한 style로 대기하고 애니메이션이 끝나면 마지막 키프레임에서 설정한 style을 유지한다.

  • backwards키워드CSS3

    웹페이지의 로드가 완료되면 선택자에 적용한 기본 style이 아닌 애니메이션 첫 키프레임의 style을 갖게 되며 애니메이션이 끝나면 선택자에 지정한 기본 style로 복귀한다.

  • both키워드CSS3

    웹페이지의 로드가 완료되면 첫 번째 키프레임의 style을 갖게 되며 애니메이션이 끝나면 마지막 키프레임의 style을 유지한다.

구문

  • animation-fill-mode none or forwards or backwards or both;기본형식CSS3
  • object.style.animationFillMode = "both";자바스크립트 형식CSS3

예제

테스트할 라디오 항목을 클릭하면 애니메이션 결과가 나오며 설명이 출력된다.

지원 웹브라우저