CSS3 애니메이션의 핵심, @keyframes 사용법 완벽 정리

CSS3에서 @keyframes는 애니메이션의 중간 단계를 제어하는 핵심 규칙입니다. 이 규칙을 활용하면 요소가 시작 상태에서 끝 상태로 변화하는 과정을 세밀하게 조정할 수 있어, 자바스크립트 없이도 부드럽고 다양한 애니메이션 효과를 구현할 수 있습니다.

@keyframes 기본 문법

아래 예제는 배경색이 분홍색(pink)에서 초록색(green)으로 서서히 변하는 간단한 애니메이션입니다. 애니메이션의 이름과 지속 시간을 함께 지정하여 div 요소에 적용하는 방법을 보여줍니다.

@keyframes animation {
    from {background-color: pink;}
    to {background-color: green;}
}
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: animation;
    animation-duration: 5s;
}

코드 설명

1. @keyframes 블록

@keyframes animation { ... } 부분은 'animation'이라는 이름의 애니메이션을 정의합니다. from은 애니메이션의 시작 지점(0%), to는 종료 지점(100%)을 의미합니다.

2. 애니메이션 적용 속성

• animation-name: 적용할 @keyframes의 이름을 지정합니다.
• animation-duration: 애니메이션이 한 번 실행되는 데 걸리는 시간을 설정합니다. 위 예제에서는 5초(5s) 동안 색상이 변화합니다.

백분율(%)로 중간 단계 제어하기

단순한 from/to 대신 백분율을 사용하면 더욱 세밀한 중간 단계를 만들 수 있습니다.

@keyframes animation {
    0%   {background-color: pink;}
    50%  {background-color: yellow;}
    100% {background-color: green;}
}

위 코드처럼 작성하면 분홍색 → 노란색 → 초록색 순서로 단계적으로 색상이 변화하며, 원하는 만큼 중간 지점을 추가할 수 있습니다.

유용한 추가 애니메이션 속성

• animation-timing-function: 변화 속도의 가속/감속 패턴(ease, linear 등)을 지정합니다.
• animation-delay: 애니메이션 시작 전 대기 시간을 설정합니다.
• animation-iteration-count: 반복 횟수를 지정하며, infinite를 쓰면 무한 반복됩니다.
• animation-direction: 역방향 재생 또는 교차 재생 방향을 설정합니다.

@keyframes와 이러한 속성들을 조합하면 텍스트 강조, 버튼 호버 효과, 로딩 인디케이터 등 웹 페이지 곳곳에 생동감 있는 UI를 손쉽게 구현할 수 있습니다.