CSS right 속성을 활용한 애니메이션 구현 방법

CSS에서 right 속성에 애니메이션 효과를 적용하면 요소를 화면 오른쪽 방향으로 부드럽게 이동시킬 수 있습니다. 이를 위해서는 @keyframes 규칙으로 애니메이션의 각 단계별 위치 값을 정의하고, animation 속성으로 이를 요소에 연결해야 합니다.

right 속성 애니메이션의 기본 원리

right 속성은 위치 지정(position)이 설정된 요소가 기준점(주로 뷰포트나 부모 요소)의 오른쪽 가장자리에서 얼마나 떨어져 있을지를 결정합니다. 이 값이 변화하는 과정을 애니메이션으로 만들면 요소가 좌우로 움직이는 효과를 얻을 수 있습니다.

예제 코드

아래 예제에서는 파란색 박스가 화면 오른쪽으로 이동했다가 다시 돌아오는 애니메이션이 무한히 반복됩니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            position: absolute;
            right: 0;
            width: 300px;
            height: 200px;
            background-color: blue;
            animation: myanim 5s infinite;
         }
         @keyframes myanim {
            30% {
               right: 350px;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS right 속성</h1>
      <div id = "demo">
         <h1>데모 텍스트입니다.</h1>
      </div>
   </body>
</html>

코드 설명

position: absolute; — 요소를 절대 위치로 배치하여 right 속성이 적용되도록 합니다.
right: 0; — 애니메이션 시작 시 요소가 화면 오른쪽 끝에 붙어 있도록 초기 위치를 설정합니다.
animation: myanim 5s infinite; — myanim이라는 이름의 키프레임 애니메이션을 5초 동안 실행하며, 무한히 반복합니다.
@keyframes myanim — 애니메이션 구간 중 30% 시점에 right 값을 350px로 변경하여 요소가 왼쪽으로 이동하게 만듭니다.

이처럼 @keyframes 안에서 위치 관련 속성값을 단계적으로 변경하면, 별도의 JavaScript 없이도 순수 CSS만으로 다양한 이동 애니메이션을 손쉽게 구현할 수 있습니다.