키프레임(keyframes)과 다양한 CSS 애니메이션 속성을 활용하면 자바스크립트 없이 순수 CSS만으로 부드럽게 반복되는 배경색 애니메이션을 만들 수 있습니다. 이 글에서는 그 과정을 단계별로 살펴봅니다.
이번 예제에서는 HTML <body> 요소에 직접 CSS를 적용하지만, 소개하는 코드는 모든 HTML 요소, 클래스(class), 아이디(id)에 동일하게 적용할 수 있습니다.
완성된 코드
아래 데모를 참고용으로 활용해 보세요.
참고: 이 코드는 IE9(Internet Explorer 9)에서는 작동하지 않습니다.
애니메이션 계획하기
최종 결과물이 정확히 어떤 모습일지 확신이 없더라도, 코딩 전에 방향을 잡아두면 작업이 훨씬 수월합니다. 반복 애니메이션을 만들기 전에 먼저 다음 사항들을 정해 보겠습니다.
- 몇 가지 배경색을 사용할 것인가?
- 애니메이션의 총 지속 시간은 얼마로 할 것인가?
- 어떤 종류의 애니메이션 곡선을 사용할 것인가?
이 튜토리얼의 목적은 최대한 단순하게 만드는 것이므로, 아래와 같이 설정하겠습니다.
- 5가지 서로 다른 배경색 사용
- 총 지속 시간 10초 (각 색상이 2초씩 표시됨)
- 리니어(linear) 애니메이션 곡선 (시작부터 끝까지 일정한 속도 유지)
이 예제에서는 Coolors.co를 이용해 조화로운 색상 팔레트를 빠르게 생성했습니다.
곧 만들 배경 애니메이션이 순환할 헥스(hex) 색상 코드는 다음과 같습니다.
- 선셋 오렌지(sunset orange):
#EE6055 - 미디엄 아쿠아마린(medium aquamarine):
#60D394 - 페이일 그린(pale green):
#AAF683 - 멜로우 옐로우(mellow yellow):
#FFD97D - 비비드 탠저린(vivid tangerine):
#FF9B85
색상 이름을 전부 외울 필요는 없습니다(Coolors에서 가져온 이름입니다). 이해를 돕기 위해 함께 적어두었을 뿐입니다.
자, 이제 각 색상이 2초씩 표시되는 반복 애니메이션에 넣을 5가지 색상이 준비되었습니다. 다음 단계에서 이 계획을 바탕으로 실제 애니메이션을 만들어 보겠습니다.
반복 CSS 애니메이션 만들기
CSS에서 애니메이션 키프레임은 0%부터 100%까지의 백분율로 작동합니다. 스타일시트에 다음 @keyframes 규칙을 추가하세요.
/* 표준 문법 */
@keyframes backgroundColorPalette {
0% {
background: #ee6055;
}
25% {
background: #60d394;
}
50% {
background: #aaf683;
}
75% {
background: #ffd97d;
}
100% {
background: #ff9b85;
}
}이제 backgroundColorPalette라는 이름의 키프레임 속성이 생겼습니다. 5개의 색상 구간이 애니메이션 전체 구간(0%~100%)에 고르게 나누어 배치되어 있습니다.
다음은 body 요소의 CSS 규칙(rule-set)을 만들어, 방금 정의한 키프레임 색상 팔레트를 실제로 적용할 차례입니다.
body 선택자 규칙 안에 아래 CSS 애니메이션 속성들을 추가하고, 브라우저 창에서 어떻게 변하는지 확인해 보세요.
body {
animation-name: backgroundColorPalette;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}모든 과정을 올바르게 따라 하셨다면, 이제 색상이 2초 간격으로 부드럽게 전환되며 끊임없이 실행되는 배경색 애니메이션이 완성된 것입니다.
CSS 작동 원리 살펴보기
- animation-name: 값을
backgroundColorPalette로 지정하여, 앞서 만든 배경색 키프레임을 body 요소에 연결합니다. - animation-duration: 값을
10s로 설정해 애니메이션 총 지속 시간을 10초로 합니다. 밀리초 단위인10000ms로 표기해도 같습니다. - animation-iteration-count: 값을
infinite로 지정하면 애니메이션이 무한히 반복됩니다. CSS에서 기본값은 1회 재생입니다. - animation-direction: 값을
alternate로 지정하면 애니메이션이 처음부터 끝까지 재생된 뒤, 다시 끝에서 처음으로 되감기듯 재생됩니다. 기본값인normal을 사용하면 마지막 색상에서 첫 번째 색상으로 전환될 때 어색하게 점프하는 현상이 발생하기 때문에, 이를 피하기 위해 이 속성값을 사용합니다.
알아두면 좋은 팁
CSS 애니메이션의 속도 곡선은 기본적으로 linear(리니어)로 설정되어 있습니다. 따라서 리니어 곡선을 사용하고 싶다면 CSS 규칙에 굳이 별도로 선언하지 않아도 됩니다. 앞선 예제의 애니메이션이 일정한 속도로 진행된 이유가 바로 이것입니다.
다만 협업 환경이라면 animation-timing-function: linear;를 명시적으로 추가하는 것이 좋습니다. 코드의 의도가 더 분명해져 가독성이 높아지고, CSS에는 기본값으로 활성화되는 속성이 많아 이를 모두 기억하기 어렵기 때문입니다.