@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.

* Some parts of this feature may have varying levels of support.

@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

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@keyframes
Ignore !important declarations
Named timeline range keyframe selectors
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

같이 보기