CSS padding-top 속성에 애니메이션 적용하는 방법

CSS padding-top 속성 애니메이션 구현하기

CSS에서 padding-top 속성에 애니메이션 효과를 주고 싶다면 @keyframes 규칙과 animation 속성을 함께 사용하면 됩니다. @keyframes 안에서 원하는 시점(예: 30%)에 변경할 padding-top 값을 지정하면, 요소가 자동으로 부드럽게 전환됩니다.

아래 예제는 350×150px 크기의 div 요소에 진홍색(maroon) 외곽선을 두르고, 3초 동안 무한 반복되는 애니메이션을 적용한 코드입니다. 애니메이션이 진행되면서 상단 패딩이 점차 늘어나는 것을 확인할 수 있습니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 350px;
            height: 150px;
            outline: 3px solid maroon;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            30% {
               padding-top: 60px;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS padding-top 속성</h1>
      <div></div>
   </body>
</html>

코드 설명

animation: myanim 3s infinite; — 'myanim'이라는 이름의 keyframes를 3초 주기로 무한 반복 실행합니다.
@keyframes myanim { 30% { ... } } — 애니메이션 전체 구간 중 30% 지점에서 padding-top 값을 60px로 변경합니다.

이처럼 padding-top은 애니메이션이 가능한(animatable) 속성이므로, 별도의 JavaScript 없이 순수 CSS만으로도 요소의 내부 여백 변화를 자연스럽게 연출할 수 있습니다.