CSS 애니메이션이란?
CSS 애니메이션을 사용하면 JavaScript 없이 HTML 요소에 애니메이션 효과를 줄 수 있습니다. @keyframes 규칙으로 애니메이션 상태를 정의하고, animation 속성으로 타이밍, 지속 시간, 반복을 제어합니다. CSS 애니메이션은 GPU 가속이 적용되어 전환 효과, 호버 효과, 로딩 인디케이터에 효과적입니다.
애니메이션 속성
- animation-name:
@keyframes규칙을 참조합니다. - animation-duration: 한 사이클의 지속 시간 (예: 1s, 500ms).
- animation-timing-function: 속도 곡선 (ease, linear, ease-in-out 등).
- animation-iteration-count: 애니메이션 반복 횟수 (숫자 또는
infinite).
자주 묻는 질문
CSS 애니메이션이 JavaScript 애니메이션보다 나은가요?
간단한 전환과 장식적 효과의 경우, CSS 애니메이션이 GPU에 위임될 수 있어 성능이 더 좋은 경우가 많습니다. JavaScript 애니메이션은 복잡한 시퀀스, 대화형 또는 물리 기반 애니메이션에 더 많은 제어를 제공합니다.
하나의 요소에 여러 애니메이션을 결합할 수 있나요?
네. animation 속성에서 쉼표로 여러 애니메이션 값을 구분합니다. 각 애니메이션은 고유한 키프레임, 지속 시간, 타이밍 함수를 가질 수 있습니다.