CSS에서 border-color 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙을 활용하면 됩니다. 요소의 테두리 색상이 부드럽게 변하도록 애니메이션을 정의하고, 이를 해당 요소에 무한 반복으로 지정할 수 있습니다.
예제 코드
아래 예제는 노란색 배경의 div 요소에 회색 테두리를 설정한 뒤, 3초 주기로 테두리 색상이 빨간색으로 변화하는 애니메이션을 무한히 반복하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 300px;
background: yellow;
border: 10px solid gray;
animation: myanim 3s infinite;
background-position: bottom left;
background-size: 50px;
}
@keyframes myanim {
20% {
border-color: red;
}
}
</style>
</head>
<body>
<h2>테두리 색상 애니메이션 실행</h2>
<div></div>
</body>
</html>코드 설명
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 애니메이션을 3초 동안 실행하며, 무한히(infinite) 반복합니다.
- @keyframes myanim — 애니메이션의 진행 단계를 정의합니다. 여기서는 전체 시간의 20% 지점에서 테두리 색상이 빨간색(red)으로 변경됩니다.
이처럼 @keyframes 안에서 원하는 진행률(%)마다 border-color 값을 다르게 지정하면, 테두리 색상이 자연스럽게 전환되는 애니메이션 효과를 손쉽게 구현할 수 있습니다.