CSS에서 border-left 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙을 활용하면 됩니다. 키프레임 안에서 왼쪽 테두리의 색상, 두께, 스타일 등을 단계별로 변경하면 요소의 좌측 테두리가 부드럽게 변화하는 애니메이션을 만들 수 있습니다.
구현 방법
애니메이션을 적용하는 기본 절차는 다음과 같습니다.
1. 대상 요소에 animation 속성을 설정하여 애니메이션 이름, 지속 시간, 반복 횟수를 지정합니다.
2. @keyframes 규칙 안에서 특정 진행률(예: 40%) 지점에 border-left 관련 값들을 정의합니다.
3. 브라우저가 시작 값과 종료 값 사이를 자동으로 보간하여 부드러운 전환 효과를 만들어 줍니다.
예제 코드
아래 예제는 노란색 배경의 div 요소에 3초 길이의 무한 반복 애니메이션을 적용하고, 진행률 40% 지점에서 왼쪽 테두리를 주황색 점선(dashed)으로 변경하는 코드입니다.
<!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;
background-size: 90px;
border-bottom-color: green;
border-bottom-right-radius: 50px;
border-bottom-width: 50px;
border-color: red;
border-left: 10px dashed orange;
}
}
</style>
</head>
<body>
<h2>왼쪽 테두리 애니메이션 실행</h2>
<div></div>
</body>
</html>코드 설명
@keyframes myanim 블록의 40% 지점에서 border-left: 10px dashed orange;가 적용되면서 원래 실선이었던 왼쪽 테두리가 주황색 점선으로 자연스럽게 전환됩니다. 동시에 배경색, 배경 이미지 크기, 아래쪽 테두리의 색상·두께·모서리 반경도 함께 변하며, infinite 설정 덕분에 이 과정이 3초마다 무한히 반복됩니다.