레슨 7 / 9·20분
CSS 애니메이션과 트랜지션
CSS Transition
Transition은 CSS 속성의 변화를 부드럽게 전환하는 가장 간단한 애니메이션 방법입니다. 마우스 호버, 포커스 등 상태 변화 시 자연스러운 시각 효과를 줄 수 있습니다.
css
/* ── 기본 트랜지션 ── */
.button {
background: #3b82f6;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
/* 어떤 속성을, 얼마 동안, 어떤 방식으로 전환할지 */
transition: all 0.3s ease;
}
.button:hover {
background: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
/* ── 개별 속성 지정 ── */
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.card:hover {
transform: scale(1.02);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* ── 타이밍 함수 ── */
.slide { transition: transform 0.3s ease-in-out; }
.bounce { transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }CSS Animation (@keyframes)
@keyframes를 사용하면 시작과 끝뿐 아니라 중간 단계도 세밀하게 제어할 수 있습니다. 자동 재생, 반복, 방향 전환 등 transition으로는 불가능한 복잡한 애니메이션을 만들 수 있습니다.
css
/* ── 페이드 인 ── */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
/* ── 회전 로딩 스피너 ── */
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
/* ── 펄스 효과 ── */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.pulse {
animation: pulse 2s ease-in-out infinite;
}
/* ── 순차 등장 ── */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stagger-item {
opacity: 0;
animation: slideUp 0.5s ease forwards;
}
/* 각 아이템에 딜레이 부여 */
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }- •
animation-duration- 한 사이클의 지속 시간 - •
animation-timing-function- 가속/감속 방식 (ease, linear, ease-in-out) - •
animation-delay- 시작 전 대기 시간 - •
animation-iteration-count- 반복 횟수 (숫자 또는 infinite) - •
animation-direction- 방향 (normal, reverse, alternate) - •
animation-fill-mode- 종료 후 상태 (forwards: 마지막 프레임 유지)
💡
성능을 위해 transform과 opacity만 애니메이션하세요. 이 두 속성은 GPU에서 처리되어 매우 빠릅니다. width, height, margin 등을 애니메이션하면 레이아웃 재계산이 발생하여 버벅일 수 있습니다. will-change: transform을 추가하면 브라우저가 미리 최적화합니다.