CSS에서 background-size 속성은 배경 이미지의 크기를 지정할 때 사용합니다. 이 속성에 애니메이션 효과를 적용하면 배경 이미지가 일정한 주기로 부드럽게 확대되거나 축소되는 시각적 효과를 만들 수 있습니다.
background-size 애니메이션 구현 방법
애니메이션을 적용하려면 먼저 @keyframes 규칙으로 애니메이션의 각 단계(키프레임)를 정의한 뒤, 대상 요소에 animation 속성으로 해당 규칙을 연결하면 됩니다. 아래 예제는 배경 이미지의 크기가 50px에서 90px로 커지는 애니메이션을 무한 반복하는 코드입니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 400px;
background: yellow;
background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');
animation: myanim 3s infinite;
background-position: bottom left;
background-size: 50px;
}
@keyframes myanim {
20% {
background-color: maroon;
background-position: bottom right;
background-size: 90px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
코드 설명
- animation: myanim 3s infinite; —
myanim이라는 이름의 애니메이션을 3초 동안 실행하며, 무한히 반복(infinite)하도록 설정합니다. - @keyframes myanim — 애니메이션 진행률 20% 지점에서 적용될 스타일을 정의합니다.
- background-size: 50px → 90px — 초기 배경 이미지 크기는 50px이며, 애니메이션이 진행되면서 90px로 점차 확대됩니다.
- background-position — 배경 이미지 위치도 함께 애니메이션되어 왼쪽 아래(bottom left)에서 오른쪽 아래(bottom right)로 이동합니다.
- background-color — 배경 색상 역시 노란색(yellow)에서 밤색(maroon)으로 전환됩니다.
이처럼 @keyframes 안에서 여러 배경 관련 속성을 함께 변경하면, 크기 변화만이 아니라 위치와 색상까지 조합된 다양한 동적 효과를 손쉽게 구현할 수 있습니다. background-size 애니메이션은 모든 최신 브라우저에서 지원되므로 별도의 벤더 프리픽스 없이 바로 사용할 수 있습니다.