@keyframes

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

 

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@keyframes @규칙은 CSS 오브젝트 모델 인터페이스인 CSSKeyframesRule를 통해서 접근합니다.

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

키프레임은 순서대로 나열 가능합니다. 지정된 %의 순서대로 처리됩니다.

유효한 키프레임 리스트

키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.

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

중복 해상도

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

키 프레임 밖에 속성이 지정된 경우

어떤 키 프레임에도 정의되지 않는 속성들은 애니메이션과는 완전 별도로 삽입되지 않는 경우를 제외하고는 삽입됩니다. 예를 들어,

@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%, 100% 키 프레임을 사용합니다.

0%100% 키 프레임 모두에 정의된 속성들만 애니메이션 동작을 합니다. 이 둘 중 아무것도 포함되지 않은 속성은 애니메이션 연속을 지속하기 위한 시작 값으로 사용됩니다.

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

스펙에서는 모든 속성이 각 키 프레임이 지정된 게 아니라 키 프레임이 여러번 정의 된 경우에는 가장 최근의 키프레임에 선언된 값들만 유효하다고 나와 있습니다. 예를 들어,

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

이 예제를 보면 50% 키프레임에서 top: 10px 이고 다른 값들은 모두 무시됩니다.

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

키프레임에서 !important

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

@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; }
}

Syntax

Values

<identifier>
A name identifying the keyframe list. This must match the identifier production in CSS syntax.
from
A starting offset of 0%.
to
An ending offset of 100%.
<percentage>
A percentage of the time through the animation sequence at which the specified keyframe should occur.

Formal syntax

@keyframes <keyframes-name> {
  <keyframe-block-list>
}

where
<keyframes-name> = <custom-ident> | <string>
<keyframe-block-list> = <keyframe-block>+

where
<keyframe-block> = <keyframe-selector># { <declaration-list> }

where
<keyframe-selector> = from | to | <percentage>

Examples

See CSS animations for examples.

Specifications

Specification Status Comment
CSS Animations
The definition of '@keyframes' in that specification.
Working Draft  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@keyframesChrome Full support 43
Full support 43
Full support 2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes @keyframes is unsupported in scoped stylesheets in Firefox (bug 830056).
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 10Opera Full support 30
Full support 30
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 15
No support 12 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 9
Full support 9
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 43
Full support 43
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 43
Full support 43
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 30
Full support 30
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 14
No support 12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 9
Full support 9
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 4.0
Full support 4.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Ignore !important declarationsChrome Full support 45Edge No support NoFirefox Full support 19IE No support NoOpera Full support 32Safari Full support 10.1WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 19Opera Android Full support 32Safari iOS Full support 10.1Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Notes

  1. @keyframes not supported in an inline or scoped stylesheet in Firefox (bug 830056).

See also