CSS에서 margin-bottom 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙을 정의하고, animation 속성으로 해당 애니메이션을 요소에 연결하면 됩니다.
아래 예제는 문단 요소의 아래쪽 여백(margin-bottom)이 20px에서 60px로 부드럽게 변화하도록 설정한 코드입니다. 애니메이션은 3초 동안 진행되며 무한 반복됩니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
p {
animation: mymove 3s infinite;
margin-bottom: 20px;
}
@keyframes mymove {
70% {
margin-bottom: 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>
<p>This is demo text 2!</p>
</body>
</html>코드 설명
animation: mymove 3s infinite; — 'mymove'라는 이름의 애니메이션을 3초 동안 실행하고, 무한히 반복하도록 지정합니다.
@keyframes mymove — 애니메이션의 중간 상태를 정의합니다. 이 예제에서는 전체 시간의 70% 지점에 도달했을 때 margin-bottom 값이 60px로 변경됩니다.
이처럼 margin-bottom은 애니메이션이 가능한(animatable) 속성이므로, keyframes 내에서 값을 단계적으로 변경해 요소 간의 간격이 자연스럽게 늘어나고 줄어드는 효과를 만들 수 있습니다.