CSS에서 border-left-color 속성은 요소 왼쪽 테두리의 색상을 지정합니다. 이 속성은 @keyframes 규칙과 animation 속성을 함께 사용하면 부드러운 색상 전환 애니메이션으로 구현할 수 있습니다.
예제 코드
아래 예제는 div 요소의 왼쪽 테두리 색상이 3초 주기로 반복적으로 변화하는 애니메이션을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 300px;
background: yellow;
border: 10px solid yellow;
border-bottom-right-radius: 100px;
border-bottom-width: 30px;
background-image: url('https://www.tutorialspoint.com/latest/testrail.png');
animation: myanim 3s infinite;
background-position: bottom left;
background-size: 50px;
}
@keyframes myanim {
40% {
background-color: maroon;
border-bottom-color: green;
border-bottom-right-radius: 50px;
border-bottom-width: 50px;
border-color: red;
border-left-color: lightblue;
}
}
</style>
</head>
<body>
<h2>border-left-color 애니메이션 실행</h2>
<div></div>
</body>
</html>
코드 설명
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 애니메이션을 3초 동안 실행하고, 무한히 반복합니다.
- @keyframes myanim — 애니메이션 진행률 40% 시점에 적용될 스타일 변화를 정의합니다.
- border-left-color: lightblue; — 40% 지점에서 왼쪽 테두리 색상이 lightblue(연한 파란색)로 전환됩니다.
@keyframes 안에서 border-left-color 값을 지정하면, 브라우저가 초기 색상과 목표 색상 사이를 자동으로 보간(interpolation)하여 부드러운 색상 전환 효과를 만들어 줍니다. 이 기법은 테두리 강조, 포커스 표시 등 다양한 UI 연출에 활용할 수 있습니다.