CSS에서 배경에 애니메이션을 적용하려면 @keyframes 규칙을 활용해야 합니다. @keyframes는 애니메이션이 진행되는 동안 특정 시점(예: 30%, 50%)에서 요소의 스타일이 어떻게 변화할지를 정의하는 역할을 합니다.
아래 예제는 div 요소의 배경 색상과 배경 위치, 크기를 3초 동안 무한 반복하며 애니메이션하는 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 300px;
animation: myanim 3s infinite;
}
@keyframes myanim {
30% {
background: green bottom right/50px 50px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>코드 설명
위 코드의 핵심 부분을 살펴보면 다음과 같습니다.
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 애니메이션을 3초 동안 한 번 재생하고, infinite 값으로 인해 무한히 반복합니다.
- @keyframes myanim { 30% { ... } } — 애니메이션이 30% 지점에 도달했을 때 배경이 초록색(green)으로 변경되고, 배경 위치는 오른쪽 하단(bottom right), 배경 크기는 50px × 50px로 설정됩니다.
이처럼 @keyframes 안에 여러 퍼센트 지점(0%, 30%, 60%, 100% 등)을 추가하면 더욱 다양하고 복잡한 배경 애니메이션 효과를 만들 수 있습니다. background 속성 대신 background-color, background-position, background-size 등 개별 속성을 나누어 정의하면 브라우저 호환성과 성능 측면에서도 유리합니다.