CSS에서 border-right-color 속성에 애니메이션을 적용하고 싶다면 @keyframes 규칙을 활용하면 됩니다. 아래 예제 코드를 실행하면 요소의 오른쪽 테두리 색상이 부드럽게 변화하는 모습을 확인할 수 있습니다.
동작 원리
핵심은 @keyframes 블록 안에서 특정 진행 시점(예: 30%)에 border-right-color 값을 지정하는 것입니다. 이렇게 하면 애니메이션이 재생되는 동안 브라우저가 시작 색상과 지정된 색상 사이를 자동으로 보간하여 자연스러운 색상 전환 효과를 만들어 줍니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 300px;
background: yellow;
border: 15px 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 {
30% {
background-color: maroon;
border-right-color: red;
}
}
</style>
</head>
<body>
<h2>border-right-color 애니메이션 실행</h2>
<div></div>
</body>
</html>코드 설명
위 코드에서는 500×300px 크기의 div 요소에 노란색 배경과 15px 두께의 테두리를 설정했습니다. animation: myanim 3s infinite; 선언을 통해 'myanim'이라는 이름의 애니메이션이 3초 주기로 무한 반복되도록 지정했습니다.
애니메이션이 전체 시간의 30% 지점에 도달하면 배경색은 밤색(maroon)으로, 오른쪽 테두리 색상은 빨간색(red)으로 변경됩니다. 나머지 구간에서는 원래 값으로 되돌아가며, 이 과정이 반복되면서 테두리 색상이 깜빡이듯 변화하는 효과를 볼 수 있습니다.