CSS에서 padding-bottom 속성에 애니메이션 효과를 적용하면 요소의 아래쪽 안쪽 여백이 부드럽게 변화하는 동적인 화면을 만들 수 있습니다. 이를 위해서는 @keyframes 규칙으로 애니메이션의 변화 단계를 정의하고, animation 속성으로 해당 애니메이션을 요소에 연결해야 합니다.
CSS padding-bottom 애니메이션 예제
아래 코드는 div 요소의 padding-bottom 값을 3초 주기로 무한 반복하며 애니메이션하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 150px;
outline: 3px solid blue;
animation: myanim 3s infinite;
}
@keyframes myanim {
50% {
padding-bottom: 30px;
}
}
</style>
</head>
<body>
<h1>CSS padding-bottom 속성</h1>
<div></div>
</body>
</html>코드 설명
- @keyframes myanim: 'myanim'이라는 이름의 애니메이션을 정의합니다. 진행률 50% 지점에서 padding-bottom 값이 30px로 변경됩니다.
- animation: myanim 3s infinite; 정의한 애니메이션을 div 요소에 적용합니다. 한 사이클은 3초(3s)이며,
infinite키워드로 인해 애니메이션이 무한히 반복됩니다. - outline: 3px solid blue; 파란색 외곽선을 추가하여 여백 변화를 시각적으로 쉽게 확인할 수 있도록 합니다.
동작 원리
애니메이션이 시작되면 padding-bottom은 초기값에서 시작하여 전체 시간의 절반인 1.5초 시점에 30px에 도달한 후, 다시 초기값으로 되돌아갑니다. 브라우저가 중간 값을 자동으로 보간(interpolation)하기 때문에 여백이 부드럽게 늘어나고 줄어드는 효과가 나타납니다.
참고 사항
padding 속성은 애니메이션이 가능한(animatable) 속성이므로 transition이나 keyframes와 함께 사용할 수 있습니다. 다만 패딩 변화는 레이아웃 재계산(reflow)을 유발할 수 있으므로, 성능이 중요한 경우 transform 기반 애니메이션을 고려하는 것이 좋습니다.