CSS border-bottom 속성에 애니메이션 효과 적용하기

CSS에서 border-bottom 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙을 활용하면 됩니다. 아래 예제는 3초 주기로 무한 반복되는 애니메이션을 통해 요소의 하단 테두리가 점진적으로 변화하는 모습을 보여줍니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 500px;
            height: 400px;
            background: yellow;
            border: 5px dashed yellow;
            background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');
            animation: myanim 3s infinite;
            background-position: bottom left;
            background-size: 50px;
         }
         @keyframes myanim {
            20% {
               background-color: maroon;
               background-position: bottom right;
               background-size: 90px;
               border-bottom: 25px solid orange;
            }
         }
      </style>
   </head>
   <body>
      <h2>하단 테두리 애니메이션 실행</h2>
      <div></div>
   </body>
</html>

코드 설명

animation 속성: myanim 3s infinite로 설정하여 이름이 myanim인 애니메이션이 3초 동안 한 번 실행되고, 이를 무한히 반복하도록 지정했습니다.
@keyframes 규칙: 애니메이션의 20% 지점에서 배경색, 배경 위치, 배경 크기와 함께 border-bottom이 25px solid orange로 변경됩니다.
border-bottom 애니메이션: 초기값인 5px dashed yellow에서 두께 25px의 실선 주황색 테두리로 부드럽게 전환되는 것을 확인할 수 있습니다.

이처럼 @keyframes 안에서 원하는 진행 시점(%)마다 스타일 값을 정의하면, 하단 테두리뿐 아니라 다양한 CSS 속성에도 자유롭게 애니메이션 효과를 줄 수 있습니다.