CSS border-right 속성으로 애니메이션 효과 구현하는 방법

CSS에서 border-right 속성에 애니메이션을 적용하면 요소의 오른쪽 테두리가 부드럽게 변화하는 효과를 만들 수 있습니다. 핵심은 @keyframes 규칙을 활용해 애니메이션의 특정 시점(예: 40%)에 테두리의 색상과 두께를 변경하는 것입니다.

border-right 애니메이션 예제 코드

아래 예제는 노란색 배경의 div 요소가 3초 주기로 반복되는 애니메이션을 통해 오른쪽 테두리가 빨간색으로 굵어지는 모습을 보여줍니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 500px;
            height: 300px;
            background: yellow;
            border: 10px solid yellow;
            background-image: url('https://www.tutorialspoint.com/latest/testrail.png');
            animation: myanim 3s infinite;
            background-position: bottom left;
            background-size: 50px;
         }
         @keyframes myanim {
            40% {
               background-color: maroon;
               border-color: red;
               border-right: 50px solid red;
            }
         }
      </style>
   </head>
   <body>
      <h2>오른쪽 테두리 애니메이션 실행</h2>
      <div></div>
   </body>
</html>

코드 동작 원리 살펴보기

위 코드가 어떻게 작동하는지 단계별로 정리하면 다음과 같습니다.

animation: myanim 3s infinite; — div 요소에 'myanim'이라는 이름의 애니메이션을 3초 동안 무한히 반복하도록 지정합니다.
@keyframes myanim — 애니메이션의 중간 지점인 40% 구간에서 배경색은 밤색(maroon)으로, 테두리 색상은 빨간색(red)으로 변경됩니다.
border-right: 50px solid red; — 이 시점에 오른쪽 테두리만 두께 50px의 빨간색 실선으로 확대되면서 시각적인 강조 효과가 나타납니다.

애니메이션이 진행되면 처음에는 얇은 노란색 테두리였다가, 전체 주기의 40% 지점에서 오른쪽 테두리가 두껍고 선명한 빨간색으로 자연스럽게 전환됩니다. 이후 다시 원래 상태로 돌아오며 이 과정이 계속 반복됩니다.

활용 팁

@keyframes 내에서 변경할 수 있는 값은 두께와 색상뿐만 아니라 border-right-style(실선, 점선 등)도 포함됩니다. 또한 40% 대신 여러 개의 구간(0%, 50%, 100% 등)을 지정하면 더욱 다채로운 애니메이션 흐름을 연출할 수 있습니다.