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

CSS에서 left 속성에 애니메이션을 적용하려면 @keyframes 규칙으로 애니메이션 동작을 정의한 뒤, animation 속성을 통해 해당 요소에 연결하면 됩니다. 아래 예제는 검은색 테두리를 가진 박스가 왼쪽에서 오른쪽으로 부드럽게 이동하는 애니메이션을 보여줍니다.

예제

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            border: 2px solid black;
            width: 300px;
            height: 100px;
            position: absolute;
            left: 0;
            animation: myanim 5s infinite;
         }
         @keyframes myanim {
            30% {
               left: 200px;
            }
         }
      </style>
   </head>
   <body>
      <div>This is demo text</div>
   </body>
</html>

코드 설명

position: absolute; — left 속성은 position 값이 static이 아닐 때만 적용되므로, 요소에 absolute 위치 지정을 설정해야 합니다.
@keyframes myanim — 애니메이션 전체 시간 중 30% 지점에서 left 값을 200px로 변경하도록 정의합니다.
animation: myanim 5s infinite; — 정의한 keyframes를 5초 동안 실행하며, 무한히 반복되도록 설정합니다.

이처럼 @keyframes와 animation 속성을 조합하면 left 속성뿐만 아니라 top, opacity, transform 등 다양한 CSS 속성에도 자유롭게 애니메이션 효과를 줄 수 있습니다.