CSS 애니메이션이란?
애니메이션(Animation)은 요소에 움직임 효과를 부여하고 화면상의 모양을 점진적으로 변화시키는 과정입니다. CSS는 다양한 애니메이션 효과를 지원하며, 이를 활용하면 자바스크립트 없이도 버튼 클릭, 페이지 로딩 등 특정 이벤트에 따른 동적인 동작을 손쉽게 구현할 수 있습니다.
CSS3부터 도입된 애니메이션 기능의 핵심에는 키프레임(Keyframes)이라는 개념이 있습니다. 키프레임은 애니메이션의 시작점과 끝점뿐만 아니라 중간 단계의 상태까지 세밀하게 제어할 수 있게 해주는 규칙으로, 복잡하고 부드러운 움직임 표현을 가능하게 합니다.
@keyframes 기본 문법
아래 예제는 @keyframes 문법을 사용하여 애니메이션의 이름, 색상 변화, 크기, 지속 시간 등을 정의하는 방법을 보여줍니다. 이 예제에서는 div 요소의 배경색이 분홍색에서 초록색으로 5초에 걸쳐 서서히 전환됩니다.
@keyframes animation {
from {background-color: pink;}
to {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
}코드 설명
- @keyframes animation: 'animation'이라는 이름의 키프레임 규칙을 정의합니다.
- from / to: 애니메이션의 시작 시점(from)과 종료 시점(to)의 스타일을 각각 지정합니다.
- animation-name: 적용할 키프레임의 이름을 지정합니다.
- animation-duration: 애니메이션이 한 번 실행되는 데 걸리는 시간을 설정합니다. 여기서는 5초(5s)입니다.
이처럼 @keyframes와 애니메이션 관련 속성들을 조합하면 배경색 변화뿐만 아니라 위치 이동, 크기 조절, 회전 등 다양한 시각적 효과를 자유롭게 구현할 수 있습니다.