프론트엔드
CSS Animations & TransitionsCSS 애니메이션
CSS 애니메이션과 트랜지션은 JavaScript 없이 순수 CSS로 동적인 시각 효과를 구현하는 기술이다. 트랜지션은 상태 변화 시 부드러운 전환을, 애니메이션은 키프레임 기반의 복잡한 동작을 정의한다.
Transition (상태 전환)
css
/* 기본 문법: property duration easing delay */
.button {
background-color: #3b82f6;
transform: scale(1);
transition: background-color 0.3s ease,
transform 0.2s ease-out;
}
.button:hover {
background-color: #1d4ed8;
transform: scale(1.05);
}
/* 모든 속성 전환 (성능 주의) */
.element { transition: all 0.3s ease; }Easing 함수
css
/* 내장 이징 */
transition: all 0.3s ease; /* 기본 */
transition: all 0.3s linear; /* 일정 속도 */
transition: all 0.3s ease-in; /* 천천히 시작 */
transition: all 0.3s ease-out; /* 천천히 끝 */
transition: all 0.3s ease-in-out; /* 양쪽 완만 */
/* 커스텀 베지어 곡선 */
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 탄성 효과 */@keyframes 애니메이션
css
/* 키프레임 정의 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 적용 */
.modal {
animation: fadeIn 0.3s ease-out forwards;
}
.loader {
animation: spin 1s linear infinite;
}
.badge {
animation: pulse 2s ease-in-out infinite;
}성능 최적화
css
/* GPU 가속: transform, opacity만 사용 권장 */
.optimized {
/* 좋음: GPU 레이어에서 처리 */
transform: translateX(100px);
opacity: 0.5;
/* 나쁨: 레이아웃 재계산 유발 */
/* left: 100px; margin-top: 10px; width: 200px; */
will-change: transform; /* 미리 GPU 레이어 예약 */
}Web Animations API (JavaScript)
javascript
const el = document.querySelector('.box');
const animation = el.animate([
{ transform: 'translateX(0)', opacity: 1 },
{ transform: 'translateX(300px)', opacity: 0 },
], {
duration: 1000,
easing: 'ease-out',
fill: 'forwards',
});
animation.onfinish = () => console.log('완료!');
animation.pause();
animation.play();