CSS border-top-color 속성 애니메이션 구현하기
테두리의 위쪽 색상을 담당하는 border-top-color 속성은 CSS의 @keyframes 규칙을 활용하면 부드럽게 애니메이션 처리할 수 있습니다. 요소의 윗 테두리 색상이 일정한 주기마다 자연스럽게 변하도록 만들고 싶다면, 아래 예제 코드를 그대로 실행해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px 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-spacing: 50px;
border-top-color: red;
}
}
</style>
</head>
<body>
<h2>border-top-color 애니메이션 데모</h2>
<table id = "newTable">
<tr>
<th>과목</th>
<th>학생</th>
<th>점수</th>
</tr>
<tr>
<td>수학</td>
<td>김민준</td>
<td>98</td>
</tr>
<tr>
<td>과학</td>
<td>이서연</td>
<td>99</td>
</tr>
</table>
</body>
</html>코드 설명
#newTable 선택자에는 animation: myanim 3s infinite;가 적용되어 있습니다. 이는 myanim이라는 이름의 키프레임 애니메이션을 3초 동안 한 번 재생하고, 무한히 반복하겠다는 의미입니다.
@keyframes myanim 블록 안에서는 전체 진행 시간 중 30% 지점에 도달했을 때 배경색을 주황색(orange)으로 바꾸고, border-top-color: red;를 통해 테이블의 윗 테두리 색상을 빨간색으로 전환합니다. 애니메이션이 반복되면서 노란색 테두리가 빨간색으로 부드럽게 변하는 효과를 확인할 수 있습니다.
핵심 포인트 정리
- border-top-color: 요소 윗 테두리의 색상만 개별적으로 지정하는 속성입니다.
- @keyframes: 애니메이션의 시작, 중간(30%), 끝 상태를 단계별로 정의합니다.
- animation 속성: 애니메이션 이름, 지속 시간(3s), 반복 횟수(infinite)를 한 줄로 설정할 수 있습니다.
이처럼 @keyframes와 animation 속성만 활용하면 별도의 JavaScript 없이 순수 CSS만으로 테두리 색상 애니메이션을 손쉽게 구현할 수 있습니다.