CSS로 width 속성 애니메이션 효과 구현하기

CSS에서 width(너비) 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙을 활용하면 됩니다. 요소에 기본 스타일을 지정한 뒤, 애니메이션 이름을 정의하고 원하는 시점(퍼센트)에 변경될 너비 값을 설정하는 방식입니다.

예제 코드

아래 예제는 박스 요소의 너비가 3초 동안 300px에서 500px로 부드럽게 확장되는 애니메이션을 보여줍니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 250px;
            background-color: maroon;
            color: white;
            animation: myanim 3s;
         }
         @keyframes myanim {
            30% {
               width: 500px;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS width 속성</h1>
      <div>
         <h1>데모 텍스트입니다!</h1>
      </div>
   </body>
</html>

코드 설명

animation: myanim 3s; — 'myanim'이라는 이름의 애니메이션을 3초 동안 실행합니다.
@keyframes myanim — 애니메이션의 진행 단계를 정의합니다.
30% — 전체 애니메이션 시간 중 30% 지점(약 0.9초)에 도달했을 때 너비가 500px로 변합니다.

이처럼 @keyframes 안에 여러 단계를 추가하면 더욱 다양하고 복잡한 너비 변화 효과를 만들 수 있습니다.