CSS outline-width(외곽선 두께) 애니메이션 구현 방법

CSS outline-width 속성 애니메이션 구현하기

CSS에서 outline-width(외곽선 두께) 속성에 애니메이션을 적용하려면 @keyframes 규칙과 animation 속성을 함께 사용하면 됩니다. 아래 예제는 div 요소의 외곽선 두께가 2px에서 10px로 부드럽게 늘어났다가 되돌아오는 애니메이션을 보여줍니다.

예제

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 350px;
            height: 150px;
            outline: 2px solid yellow;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            50% {
               outline-width: 10px;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS outline-width property</h1>
      <div></div>
   </body>
</html>

코드 설명

outline: 2px solid yellow; : 노란색 실선으로 두께 2px의 외곽선을 설정합니다.
animation: myanim 3s infinite; : 'myanim'이라는 이름의 애니메이션을 3초 주기로 무한 반복 실행합니다.
@keyframes myanim : 애니메이션이 진행되는 동안 50% 지점에서 outline-width 값이 10px로 늘어나도록 정의합니다.

outline-width는 요소의 레이아웃(크기나 위치)에 영향을 주지 않으면서 시각적인 강조 효과를 줄 수 있어서, 입력 필드 포커스 표시나 버튼 하이라이트 등 다양한 UI 인터랙션에 유용하게 활용할 수 있습니다.