@keyframes
@keyframes
@규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
@keyframes
@규칙은 CSS 오브젝트 모델 인터페이스인 CSSKeyframesRule
(en-US)를 통해서 접근합니다.
키프레임을 사용하려면 @keyframes
룰을 애니메이션과 키프레임 리스트를 매칭시킬 animation-name
(en-US) 속성에서 사용할 이름과 함께 생성합니다. 각 @keyframes
룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성됩니다.
키프레임은 순서대로 나열 가능합니다. 지정된 %의 순서대로 처리됩니다.
유효한 키프레임 리스트
키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.
만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 이 속성은 무시가 됩니다. 애니메이션을 지원하는 속성들은 여전히 애니메이션이 됩니다.
중복 해상도
만약 한개의 이름에 대해서 여러개의 키프레임 셋이 존재하면, 파서가 마지막으로 마주치는 키프레임 셋만 유효합니다. @keyframes 룰은 연속되지 않기 때문에 한개의 룰 셋 이상을 적용하지 않습니다.
키 프레임 밖에 속성이 지정된 경우
어떤 키 프레임에도 정의되지 않는 속성들은 애니메이션과는 완전 별도로 삽입되지 않는 경우를 제외하고는 삽입됩니다. 예를 들어,
@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
여기 top
(en-US) 속성은 0%
, 30%
, 100%
키 프레임을 이용하여 애니메이션 됩니다. left
(en-US) 속성은 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 <keyframes-name> { <rule-list> }
<keyframes-name> =
<custom-ident> (en-US) |
<string> (en-US)
Examples
See CSS animations for examples.
명세서
Specification |
---|
CSS Animations Level 1 # keyframes |
브라우저 호환성
BCD tables only load in the browser
Notes
- @keyframes not supported in an inline or scoped stylesheet in Firefox (Firefox bug 830056).