Properties

Properties

Editing
  • account_tree
  • bug_report

animation-fill-mode

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

사용 가능한 값 타입

〈single-animation-fill-mode〉

사용되는 키워드

  • backwards

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

  • both

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

  • forwards

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

  • none

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

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • noneCSS3

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

구문

  • animation-fill-mode none | forwards | backwards | both;CSS3
  • object.style.animationFillMode = "both";CSS3

예제

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

지원 웹브라우저