CSS로 margin-top 속성에 애니메이션 적용하기

CSS margin-top 애니메이션 구현 방법

CSS에서 margin-top 속성에 애니메이션을 적용하려면 @keyframes 규칙과 animation 속성을 함께 사용하면 됩니다. 아래 예제는 4초 주기로 무한 반복되는 애니메이션을 통해 요소의 상단 마진 값을 부드럽게 변경하는 방법을 보여줍니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: orange;
            animation: myanim 4s infinite;
            color: white;
         }
         @keyframes myanim {
            30% {
               margin-top: 30px;
            }
         }
      </style>
   </head>
   <body>
      <h2>Heading One</h2>
      <div>
         This is demo text.
      </div>
   </body>
</html>

코드 설명

animation: myanim 4s infinite; — 'myanim'이라는 이름의 키프레임 애니메이션을 4초 동안 한 번 실행하며, infinite 키워드로 인해 무한히 반복됩니다.
@keyframes myanim — 애니메이션의 진행 단계를 정의합니다. 여기서는 전체 시간의 30% 지점에서 margin-top 값이 30px로 변경됩니다.
애니메이션이 시작되면 div 요소가 위쪽으로 마진이 생기면서 아래로 밀려나는 효과를 확인할 수 있습니다.

이처럼 @keyframes 안에 원하는 진행률(%)과 함께 margin-top 값을 지정하면, 별도의 JavaScript 없이 순수 CSS만으로 상단 마진 애니메이션을 간단하게 구현할 수 있습니다.