@keyframes
Baseline | Widely available *
Chrome, Edge, Firefox, Safari에서 지원돼요.
이 기능은 잘 확립되어 있고 많은 기기와 브라우저 버전에서 작동해요. 2015년 9월부터 모든 브라우저에서 사용 가능했어요.
* 이 기능의 일부 부분은 지원 수준이 다를 수 있어요.
@keyframes CSS at-rule은 애니메이션 시퀀스를 따라 키프레임(또는 웨이포인트)의 스타일을 정의함으로써 CSS 애니메이션 시퀀스의 중간 단계를 제어해요. 이를 통해 트랜지션보다 애니메이션 시퀀스의 중간 단계에 대한 더 많은 제어를 할 수 있어요.
구문 (Syntax)
@keyframes slide-in {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}값 (Values)
<custom-ident>
키프레임 목록을 식별하는 이름이에요. CSS 구문의 식별자 생성 규칙에 맞아야 합니다.
from
애니메이션의 시작 지점인 0%를 의미해요.
to
애니메이션의 종료 지점인 100%를 의미해요.
<percentage>
애니메이션 시퀀스 전체 시간 중에서 해당 키프레임이 발생해야 하는 시점을 백분율로 나타낸 값이에요.
<timeline-range-name> <percentage>
지정된 animation-range 내에서 해당 키프레임이 발생해야 하는 시점의 백분율이에요. 이름이 지정된 타임라인 범위를 사용하는 애니메이션 종류에 대해 더 알고 싶다면 CSS 스크롤 기반 애니메이션 문서를 참고해 보세요.
설명 (Description)
키프레임을 사용하려면 먼저 이름을 붙여서 @keyframes 규칙을 만들어야 해요. 그런 다음 그 이름을 animation-name 속성에서 불러와서 애니메이션과 키프레임 선언을 연결하는 거죠. 각 @keyframes 규칙 안에는 키프레임 선택자 스타일 목록이 들어있는데, 여기에는 키프레임이 일어날 시점(백분율)과 그 시점에 적용할 스타일 블록이 포함됩니다.
키프레임 백분율은 어떤 순서로 나열해도 상관없어요. 브라우저가 알아서 실제 발생해야 하는 시간 순서대로 처리해 주거든요.
자바스크립트에서는 CSS 객체 모델 인터페이스인 CSSKeyframesRule을 통해 @keyframes 앳 규칙에 접근할 수 있답니다.
유효한 키프레임 목록 (Valid keyframe lists)
만약 키프레임 규칙에서 애니메이션의 시작이나 끝 상태(즉, 0%/from 또는 100%/to)를 지정하지 않으면, 브라우저는 해당 요소의 원래 스타일을 시작/끝 상태로 사용해요. 이걸 이용해서 요소를 원래 상태에서 시작해 애니메이션을 보여주고 다시 원래 상태로 되돌리는 효과를 낼 수 있죠.
키프레임 규칙 안에서 애니메이션을 적용할 수 없는 속성들은 무시되지만, 지원되는 속성들은 정상적으로 애니메이션 효과가 나타납니다.
중복 해결 (Resolving duplicates)
똑같은 이름의 키프레임 세트가 여러 개 있으면, 파서(parser)가 가장 마지막으로 발견한 것을 사용해요. @keyframes 규칙은 캐스케이드(중첩 적용)되지 않기 때문에, 하나의 애니메이션이 여러 규칙 세트에서 키프레임을 동시에 가져오는 일은 절대 없답니다.
만약 한 애니메이션 안에서 똑같은 시점(백분율)이 중복해서 나오면, 그 백분율에 해당하는 모든 키프레임 스타일이 해당 프레임에 사용돼요. 즉, 하나의 @keyframes 규칙 안에서 같은 백분율 값이 여러 번 나오면 그 안에서 캐스케이드(덮어쓰기)가 일어나는 거죠.
일부 키프레임에서 속성이 생략되었을 때
모든 키프레임에 모든 속성을 다 적어줄 필요는 없어요. 특정 속성이 빠져 있으면 브라우저가 가능한 한 값을 보간(interpolation, 부드럽게 연결)해 주거든요. 하지만 보간이 불가능한 속성은 애니메이션에서 제외됩니다. 예를 들어볼게요.
@keyframes identifier {
0% {
top: 0;
left: 0;
}
30% {
top: 50px;
}
68%,
72% {
left: 50px;
}
100% {
top: 100px;
left: 100px;
}
}이 코드에서 top 속성은 0%, 30%, 100% 지점을 기준으로 애니메이션이 일어나고, left 속성은 0%, 68%, 72%, 100% 지점을 기준으로 애니메이션이 진행됩니다.
하나의 키프레임이 여러 번 정의되었을 때
같은 백분율의 키프레임이 여러 번 정의되었는데 각각 들어있는 속성이 다르다면, 브라우저는 그 값들을 모두 합쳐서 고려해요.
@keyframes identifier {
0% {
top: 0;
}
50% {
top: 30px;
left: 20px;
}
50% {
top: 10px;
}
100% {
top: 0;
}
}이 예제에서 50% 지점의 키프레임은 top: 10px과 left: 20px가 합쳐져서 적용됩니다. (같은 top은 나중에 나온 10px이 이기게 되죠!)
이런 키프레임 캐스케이딩 방식은 파이어폭스(Firefox) 14 버전부터 지원되기 시작했어요.
키프레임 안에서의 !important
키프레임 선언 안에 !important를 붙여도 브라우저가 그냥 무시해 버립니다.
@keyframes important1 {
0% {
margin-top: 50px;
}
50% {
margin-top: 150px !important; /* 이건 무시돼요! */
}
100% {
margin-top: 100px;
}
}
@keyframes important2 {
from {
margin-top: 50px;
margin-bottom: 100px;
}
to {
margin-top: 150px !important; /* 이것도 무시됩니다! */
margin-bottom: 50px;
}
}형식적인 구문 (Formal syntax)
@keyframes =
@keyframes <keyframes-name> { <qualified-rule-list> }
<keyframes-name> =
<custom-ident> |
<string> 이 구문은 CSS Animations Level 1의 최신 표준을 반영하고 있습니다. 모든 브라우저가 모든 기능을 다 구현한 것은 아닐 수 있으니, 브라우저 호환성 정보를 확인해 보세요.
예제 (Examples)
CSS 애니메이션 예제들
구체적인 애니메이션 구현 방법은 CSS 애니메이션 사용하기 가이드와 스크롤 기반 애니메이션 문서를 참고해 보세요.
애니메이션은 사용자 경험을 풍부하게 해주지만, 과하면 오히려 독이 될 수 있어요. 필요한 곳에 적절히 사용하는 센스를 발휘해 보세요!
