@keyframes 구문과 애니메이션 속성
@keyframes로 애니메이션 단계를 정의하고 animation 단축 속성으로 적용합니다.
@keyframes 구문과 애니메이션 속성은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
CSS 애니메이션이란 무엇인가요
CSS 애니메이션을 사용하면 @keyframes로 시간에 따른 여러 단계의 속성 변경을 만들 수 있습니다. 전환과 달리 애니메이션은 자동으로 시작하거나 클래스 추가로 시작할 수 있으며 복잡한 순서를 지원합니다.
@keyframes 문법
백분율(0%~100%) 또는 from/to 키워드를 사용해 애니메이션 단계를 정의하세요.
<div class="fade-demo">Fades in</div>
<div class="pulse-demo"></div>
animation 속성
animation 단축 속성이나 하위 속성을 사용해 요소에 애니메이션을 적용하세요.
<h1 class="hero-text">Welcome!</h1>
animation-name
이름으로 @keyframes 규칙을 참조합니다.
<div class="spinner"></div>
애니메이션 지속 시간
애니메이션 한 주기를 실행하는 데 걸리는 시간을 설정합니다.
<div class="pulse"></div>
여러 애니메이션 단계
복잡한 여러 단계의 애니메이션에는 백분율 키프레임을 사용하세요.
<div class="slide-demo">Sliding in</div>
여러 속성 애니메이션하기
각 키프레임 단계에서 여러 속성을 동시에 애니메이션할 수 있습니다.
<div class="bounce-demo"></div>
키프레임별 애니메이션 타이밍 함수
타이밍 함수는 각 키프레임 단계에 설정할 수 있습니다. 그러면 전체 애니메이션이 아니라 개별 기준점 사이의 완화 방식을 제어합니다.
여러 애니메이션
쉼표로 구분한 값을 사용해 하나의 요소에 여러 애니메이션을 적용하세요.
<div class="element">Two animations combined</div>
animation-play-state
애니메이션을 동적으로 일시 정지하고 다시 시작하세요.
<div class="card">Hover the card to pause<div class="spinner"></div></div>
CSS 애니메이션과 전환 요약
상황에 맞게 선택하세요.
- 전환: 두 상태, 상태 변경으로 실행, 단순함
- 애니메이션: 여러 단계, 자동 시작, 반복, 더 다양한 제어
빠른 확인
어떤 @keyframes 키워드가 애니메이션의 시작 상태를 나타내나요?
복습
@keyframes에서 from/to 또는 백분율 기준점을 사용해 애니메이션 단계를 정의하세요. 이름, 지속 시간, 타이밍, 채우기 모드를 지정하는 animation 단축 속성으로 적용합니다. 여러 애니메이션은 쉼표로 구분합니다. 단순한 두 상태 변경에는 전환을 사용하고, 복잡한 순서에는 애니메이션을 사용하세요.
자주 묻는 질문
“@keyframes 구문과 애니메이션 속성” 강의는 무료인가요?
네 — “@keyframes 구문과 애니메이션 속성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“@keyframes 구문과 애니메이션 속성”에서 뭘 배우나요?
@keyframes로 애니메이션 단계를 정의하고 animation 단축 속성으로 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“@keyframes 구문과 애니메이션 속성” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- @keyframes 구문과 애니메이션 속성
- 애니메이션 방향, 채우기 모드 및 반복
- 애니메이션 연결 및 순차 실행
- prefers-reduced-motion을 적용한 접근 가능한 애니메이션