@keyframes

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이를 통해 브라우저가 transitions으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.

구문

css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

<custom-ident>

keyframe 목록을 식별하는 이름입니다. 이 이름은 CSS 구문에서 생성된 식별자와 일치해야 합니다.

from

시작 offset인 0% 입니다.

to

마지막 offset인 100% 입니다.

<percentage>

전체 애니메이션 시간 중 명시된 keyframe이 발생해야 하는 시점의 %입니다.

<timeline-range-name> <percentage> Experimental

지정된 animation-range 를 통과한 시간 중 지정된 키 프레임이 발생해야 하는 시간의 백분율입니다. 타임라인 범위를 사용하는 애니메이션의 종류에 대한 자세한 사항은 CSS 스크롤 기반 애니메이션을 참고하세요.

설명

키프레임을 사용하려면 @keyframes 룰을 애니메이션과 키프레임 리스트를 매칭시킬 animation-name 속성으로 사용할 이름과 함께 생성합니다. 각 @keyframes 룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성됩니다.

키프레임의 %를 꼭 순서대로 나열하지 않더라도, %의 순서대로 처리됩니다.

JavaScript는 @keyframes @규칙을 CSS 오브젝트 모델 인터페이스인 CSSKeyframesRule를 통해서 접근할 수 있습니다.

유효한 키프레임 리스트

만약 키프레임이 시작 상태와 끝 애니메이션(이는 0%/from100%/to를 말합니다)을 명시하지 않는다면, 브라우저는 처음과 마지막에 현재 존재하는 요소의 스타일을 사용합니다. 이는 요소의 애니메이션을 초기 상태에서 다시 시작하고 되돌아가는 데 사용될 수 있습니다.

만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 무시되지만, 애니메이션을 지원하는 속성들은 애니메이션이 됩니다.

중복 처리

만약 한개의 이름에 대해서 여러개의 키프레임 셋이 존재하면, 파서가 마지막으로 마주치는 키프레임 셋만 유효합니다. @keyframes 룰은 캐스케이드 되지 않기 때문에 한개의 룰 셋 이상을 적용하지 않습니다.

만약 애니메이션들의 시간 offset이 중복된 경우, 해당 %에 대한 모든 @keyframes 규칙들이 해당 프레임에 적용됩니다. 동일한 % 값을 가진 여러 @keyframes 규칙들은 캐스케이드 됩니다.

키 프레임에 속성이 누락된 경우

어떤 키 프레임에도 정의되지 않은 속성들은 중간에 가능한 곳에 삽입되며, 삽입이 가능하지 않은 애니메이션들은 제외됩니다. 예시는 아래와 같습니다.

css
@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

여기 top 속성은 0%, 30%, 100% 키 프레임을 이용하여 애니메이션 됩니다. left 속성은 0%, 68%, 72%, 100% 키 프레임을 사용해 애니메이션 됩니다.

키 프레임이 여러번 정의 된 경우

키프레임이 여러 번 정의되었지만 영향을 받는 모든 속성이 각 키프레임에 있는 것은 아니라면 이러한 키프레임에 지정된 모든 값이 고려됩니다. 예시는 아래와 같습니다.

css
@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}

이 예제를 보면 50% 키프레임에서는 top: 10pxleft: 20px 만 적용됩니다.

비표준 키 프레임 효과 연속은 Firefox 14부터 지원됩니다. 이 의미는 위 예제의 경우 50% 키 프레임에서 왼쪽 : 20px 값이 고려된다는 의미입니다. 이러한 기능이 스펙에는 아직 정의가 되어있진 않지만, 현재 도입에 대한 토론이 진행 중입니다.

키프레임에서의 !important

키프레임에서 !important 속성을 이용한 정의는 모두 무시됩니다.

css
@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important;
  } /* ignored */
  to {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /* ignored */
    margin-bottom: 50px;
  }
}

형식 구문

@keyframes = 
@keyframes <keyframes-name> { <qualified-rule-list> }

<keyframes-name> =
<custom-ident> |
<string>

예제

CSS 애니메이션에서 예제를 참고하세요.

CSS 애니메이션 예제

명세서

Specification
CSS Animations Level 1
# keyframes

브라우저 호환성

BCD tables only load in the browser

같이 보기