CSS에서 margin(여백) 속성에 애니메이션 효과를 적용하고 싶다면 @keyframes 규칙과 animation 속성을 함께 활용하면 됩니다. 아래 예제 코드를 직접 실행해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
p {
animation: mymove 3s infinite;
margin: 20px;
}
@keyframes mymove {
70% {
margin: 60px;
}
}
</style>
</head>
<body>
<p>This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
</p>
</body>
</html>코드 설명
p 요소에는 기본적으로 margin: 20px;가 적용되어 있으며, animation: mymove 3s infinite; 설정을 통해 mymove라는 이름의 애니메이션이 3초 주기로 무한히 반복됩니다.
@keyframes mymove 블록 안의 70% 구간에서는 여백 값이 60px로 변경됩니다. 그 결과 문단의 바깥 여백이 20px → 60px로 부드럽게 늘어났다가 다시 줄어드는 효과를 확인할 수 있습니다.
핵심 포인트
- animation: 애니메이션 이름, 지속 시간, 반복 횟수를 한 번에 지정합니다.
- @keyframes: 애니메이션이 진행되는 동안 특정 시점(%)마다 적용할 스타일을 정의합니다.
- margin: 요소의 상·하·좌·우 바깥 여백을 조절하는 속성으로, 값 변화가 자연스럽게 애니메이션으로 연출됩니다.