@keyframes 애니메이션
@keyframes로 여러 단계의 애니메이션을 정의하고 animation 단축 속성으로 적용하며, 반복 횟수와 방향, 채우기 모드를 제어합니다.
@keyframes 애니메이션은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
전환과 애니메이션 비교
전환은 변경으로 트리거되어 두 상태 사이를 애니메이션으로 연결합니다. @keyframes 애니메이션은 자동으로 실행되고, 반복하거나 역방향으로 재생하거나 무한히 재생할 수 있으며, 여러 중간 단계를 정의할 수 있습니다. 별도의 트리거가 필요하지 않습니다.
@keyframes 정의하기
@keyframes로 애니메이션 시퀀스를 선언합니다. 백분율(0%, 50%, 100%)을 사용하거나 from과 to 키워드를 사용해 상태를 정의합니다.
@keyframes fadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}animation 단축 속성
animation: name duration timing-function delay iteration-count direction fill-mode. 이 단축 속성을 사용해 요소에 애니메이션을 적용합니다.
.card {
animation: fadeIn 0.4s ease-out forwards;
}
.loader {
animation: pulse 1.5s ease-in-out infinite;
}animation-iteration-count
애니메이션이 재생되는 횟수를 설정합니다. infinite는 무한히 반복합니다. 숫자를 지정하면 해당 횟수만큼 정확히 재생합니다.
.spinner {
animation: spin 1s linear infinite;
}
.badge {
animation: bounce 0.6s ease 3; /* plays 3 times */
}animation-direction
normal(기본값): 매번 정방향으로 재생합니다. reverse: 역방향으로 재생합니다. alternate: 정방향으로 재생한 후 역방향으로 재생합니다. alternate-reverse도 사용할 수 있습니다. alternate는 핑퐁 효과를 구현할 때 매우 유용합니다.
@keyframes swing {
from { transform: rotate(-15deg); }
to { transform: rotate(15deg); }
}
.pendulum {
animation: swing 1s ease-in-out infinite alternate;
}animation-fill-mode
애니메이션 전후에 요소가 유지할 상태를 제어합니다. forwards: 요소가 마지막 키프레임 상태를 유지합니다. backwards: 지연 시간 동안 from 상태를 적용합니다. both: 두 동작을 모두 적용합니다.
.entrance {
opacity: 0;
animation: fadeIn 0.5s ease 0.2s forwards;
/* stays visible (opacity: 1) after animation ends */
}animation-play-state
animation-play-state: paused | running을 전환해 JavaScript에서 애니메이션을 일시 중지하고 다시 시작할 수 있습니다.
// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';여러 애니메이션
여러 애니메이션을 쉼표로 구분해 하나의 요소에 적용할 수 있습니다. 각 애니메이션은 독립적으로 실행됩니다.
.icon {
animation:
rotate 2s linear infinite,
pulse 1.5s ease-in-out infinite alternate;
}animation-delay로 애니메이션 시작 시점 나누기
항목마다 지연 시간을 늘려 목록 항목의 시작 시점을 단계적으로 나눌 수 있습니다. JavaScript와 CSS 사용자 지정 속성을 사용하면 쉽게 구현할 수 있습니다.
/* CSS */
.list-item {
animation: slideIn 0.3s ease forwards;
animation-delay: calc(var(--index) * 60ms);
}
/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
el.style.setProperty('--index', i);
});will-change — 브라우저에 보내는 힌트
will-change: transform은 해당 속성이 애니메이션으로 처리될 것임을 브라우저에 알려 줍니다. 브라우저는 미리 요소를 자체 컴포지터 레이어로 승격할 수 있습니다. 단, 너무 많은 컴포지터 레이어는 GPU 메모리를 낭비하므로 신중하게 사용하시기 바랍니다.
.animated {
will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');실습: 스켈레톤 로딩 화면
스켈레톤 화면은 콘텐츠가 로드 중임을 나타내기 위해 반짝이는 애니메이션을 사용합니다. 그레이디언트가 자리 표시자 모양 위를 가로질러 이동합니다.
@keyframes shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
#e2e8f0 25%,
#edf2f7 50%,
#e2e8f0 75%
) 200% 0 / 200% 100%;
animation: shimmer 1.5s linear infinite;
}빠른 확인
애니메이션이 끝난 후 요소가 마지막 키프레임 상태를 유지하게 하는 animation-fill-mode 값은 무엇인가요?
복습: @keyframes 애니메이션
from/to 또는 백분율을 사용해 @keyframes로 정의합니다. animation 단축 속성으로 적용합니다. 반복에는 iteration-count를 사용합니다. 핑퐁 효과에는 alternate 방향을 사용합니다. 최종 상태를 유지하려면 fill-mode: forwards를 사용합니다. animation-delay와 CSS 변수를 사용해 시작 시점을 나눌 수 있습니다. 매끄러운 컴포지팅 애니메이션을 위해 transform과 opacity 키프레임을 사용합니다.
자주 묻는 질문
“@keyframes 애니메이션” 강의는 무료인가요?
네 — “@keyframes 애니메이션” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“@keyframes 애니메이션”에서 뭘 배우나요?
@keyframes로 여러 단계의 애니메이션을 정의하고 animation 단축 속성으로 적용하며, 반복 횟수와 방향, 채우기 모드를 제어합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“@keyframes 애니메이션” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.