CSS에서 @keyframes 규칙을 활용하면 background-position(배경 위치) 속성에도 자연스러운 애니메이션 효과를 적용할 수 있습니다. 배경 이미지가 화면 안에서 이동하는 듯한 시각적 효과를 만들고 싶다면, 요소에 애니메이션을 지정하고 keyframes 내에서 배경 위치 값을 단계별로 변경하면 됩니다.
아래 예제는 div 요소의 배경 위치가 왼쪽 하단에서 오른쪽 하단으로 부드럽게 이동하도록 설정한 코드입니다. 애니메이션은 3초 동안 실행되며 infinite 옵션에 의해 무한 반복됩니다.
예제
<!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;
}
@keyframes myanim {
20% {
background-color: maroon;
background-position: bottom right;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>코드 설명
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 애니메이션을 3초 동안 무한 반복 실행합니다.
- @keyframes myanim — 애니메이션의 진행 상태를 정의합니다. 여기서는 전체 구간 중 20% 지점에서 스타일이 변경됩니다.
- background-position: bottom left → bottom right; — 배경 이미지의 위치가 왼쪽 하단에서 오른쪽 하단으로 이동하며 애니메이션이 연출됩니다.
이처럼 @keyframes와 animation 속성을 조합하면 배경 색상뿐 아니라 배경 위치까지 다양하게 제어할 수 있어, 패럴랙스 효과나 움직이는 배경 등 풍부한 UI 연출이 가능합니다.