CSS에서 background-color 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙을 정의하고, 이를 animation 속성으로 요소에 연결하면 됩니다. 배경색이 부드럽게 전환되어 시각적으로 매력적인 효과를 만들 수 있습니다.
기본 원리
@keyframes는 애니메이션이 진행되는 동안 특정 시점(백분율)에서 요소가 가져야 할 스타일을 지정합니다. 예를 들어 20% 지점에 배경색을 설정하면, 애니메이션이 시작된 후 전체 시간의 20%가 지났을 때 해당 색상으로 자연스럽게 변화합니다.
예제 코드
아래 코드는 노란색 배경의 div 요소가 3초 주기로 밤색(maroon)으로 배경색이 변하는 애니메이션을 무한 반복하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 300px;
background: yellow;
animation: myanim 3s infinite;
}
@keyframes myanim {
20% {
background-color: maroon;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>코드 설명
- width / height: 애니메이션을 확인할 수 있도록 div 요소의 크기를 400×300픽셀로 지정했습니다.
- background: yellow; 애니메이션 시작 전 요소의 초기 배경색을 노란색으로 설정합니다.
- animation: myanim 3s infinite; 이름이 'myanim'인 keyframes를 3초 동안 실행하며,
infinite값으로 인해 무한히 반복됩니다. - @keyframes myanim { 20% { ... } } 애니메이션 진행률 20% 시점에 배경색이 maroon으로 변경되도록 정의합니다.
활용 팁
keyframes 내에 여러 백분율 지점(예: 0%, 50%, 100%)을 추가하면 더욱 다채로운 색상 전환 효과를 만들 수 있습니다. 또한 ease-in-out 같은 타이밍 함수를 animation 속성에 추가하면 색상 변화가 더욱 부드러워집니다.