Properties

Properties

Editing
  • account_tree
  • bug_report

animation-fill-mode

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

사용 가능한 값 타입

<'animation-fill-mode'>

DEVDIC-Specified Data Types

animation-fill-mode 속성에 사용되는 타입이다.

  • CSS Animations Level 1
    <single-animation-fill-mode>#

    <animation-name> 설정 수에 따라 하나 이상의 <single-animation-fill-mode>을 콤마로 구분해서 작성할 수 있다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <single-animation-fill-mode>

    애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다. 즉 애니메이션이 시작되기 전과 끝난 후의 적용되는 값에 대한 정의를 나타낸다.

    • CSS Animations Level 1
      none | forwards | backwards | both
    Details

    사용되는 키워드

    • backwards

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

    • both

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

    • forwards

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

    • none

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

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

  • CSS Animations Level 1

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

  • CSS Animations Level 1

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

  • CSS Animations Level 1

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

  • CSS Animations Level 1

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

구문

  • animation-fill-mode: both;
    CSS Animations Level 1
  • object.style.animationFillMode = "both";
    CSS Animations Level 1

예제

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

버전 명세

Modules
Module NameStatusSummary
CSS Animations Level 1초안 작업

Last review date: 2022-12-6

지원 웹브라우저