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

CSS에서 margin-right 속성에 애니메이션을 구현하려면 @keyframes 규칙과 animation 속성을 함께 사용하면 됩니다. 아래 예제 코드를 직접 실행하면서 동작 방식을 확인해 보세요.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: blue;
            animation: myanim 4s infinite;
            color: white;
         }
         @keyframes myanim {
            30% {
               margin-right: 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-right: 30px; } — 전체 애니메이션 구간(4초) 중 30% 시점(약 1.2초)에 도달하면 요소의 오른쪽 마진이 30px로 변경됩니다.

결과적으로 파란색 배경의 <div> 요소가 일정한 주기마다 오른쪽 여백이 부드럽게 늘어나고 줄어드는 애니메이션 효과를 보여줍니다. 백분율 값 대신 from(0%)과 to(100%) 키워드를 사용하여 시작점과 끝점을 지정할 수도 있으며, 여러 단계의 키프레임을 추가하면 더욱 복잡하고 자연스러운 움직임을 만들 수 있습니다.