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

CSS에서 border-top 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙과 animation 속성을 함께 사용하면 됩니다. 아래 예제 코드를 직접 실행해 보세요.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         table,th,td {
            border: 1px solid black;
         }
         #newTable {
            width: 500px;
            height: 300px;
            background: yellow;
            border: 15px solid yellow;
            animation: myanim 3s infinite;
            background-position: bottom left;
            background-size: 50px;
         }
         @keyframes myanim {
            30% {
               background-color: orange;
               border-right-color: red;
               border-right-width: 25px;
               border-spacing: 50px;
               border-top: 125px solid red;
            }
         }
      </style>
   </head>
   <body>
      <h2>위쪽 테두리 애니메이션 실행</h2>
      <table id = "newTable">
         <tr>
            <th>Subject</th>
            <th>Student</th>
            <th>Marks</th>
         </tr>
         <tr>
            <td>Maths</td>
            <td>Amit</td>
            <td>98</td>
         </tr>
         <tr>
            <td>Science</td>
            <td>Sachin</td>
            <td>99</td>
         </tr>
      </table>
   </body>
</html>

코드 설명

#newTable 스타일: 테이블의 크기를 500×300px로 지정하고, 배경색과 테두리를 노란색으로 설정합니다. animation: myanim 3s infinite; 구문은 myanim이라는 이름의 애니메이션을 3초 주기로 무한 반복 실행하도록 합니다.
@keyframes myanim: 애니메이션이 진행 시간의 30% 지점에 도달했을 때 적용될 스타일을 정의합니다. 이 시점에 배경색이 주황색으로 바뀌고, 오른쪽 테두리는 빨간색 25px로, 위쪽 테두리(border-top)는 빨간색 125px로 두껍게 확장됩니다.
border-spacing: 인접한 셀 사이의 간격을 조절하는 속성으로, 이 예제에서는 50px로 설정되어 있습니다.

실행 결과

브라우저에서 코드를 실행하면 테이블의 위쪽 테두리가 노란색 15px 상태에서 빨간색 125px로 점차 두꺼워지는 애니메이션이 3초마다 반복됩니다. 동시에 배경색이 주황색으로 전환되고, 오른쪽 테두리의 색상과 두께도 함께 변하는 것을 확인할 수 있습니다.

이처럼 @keyframes를 활용하면 테두리의 두께와 색상뿐만 아니라 다양한 CSS 속성에 부드러운 애니메이션 효과를 손쉽게 추가할 수 있습니다.