CSS 애니메이션으로 vertical-align 속성 부드럽게 움직이는 방법

CSS의 vertical-align 속성은 인라인 요소나 이미지의 수직 정렬 위치를 조절하는 데 사용됩니다. 이 속성은 길이 값(px 등)을 지원하기 때문에 @keyframes 규칙과 함께 사용하면 애니메이션 효과를 줄 수 있습니다.

아래 예제에서는 이미지의 vertical-align 값을 80px에서 120px로 부드럽게 이동시키는 애니메이션을 구현했습니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            vertical-align: 80px;
            animation: myanim 3s;
         }
         @keyframes myanim {
            50% {
               vertical-align: 120px;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS vertical-align 속성</h1>
      <p><img src="https://www.tutorialspoint.com/latest/microservice_architecture.png" width="80" height="80">
         데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
      </p>
   </body>
</html>

코드 설명

vertical-align: 80px — 이미지가 기준선(baseline)으로부터 80px 위로 올라간 상태에서 시작합니다.
@keyframes myanim — 애니메이션의 중간 지점(50%)에서 vertical-align 값을 120px로 변경하여 이미지가 점차 위로 이동하는 효과를 만듭니다.
animation: myanim 3s — 'myanim'이라는 이름의 애니메이션이 3초 동안 한 번 실행됩니다.

코드를 실행하면 페이지가 로드된 후 이미지가 3초에 걸쳐 서서히 위로 이동하는 것을 확인할 수 있습니다. 무한 반복을 원한다면 animation: myanim 3s infinite;처럼 infinite 값을 추가하면 됩니다.