CSS에서 border-left-width 속성에 애니메이션을 적용하면 요소의 왼쪽 테두리 두께가 부드럽게 변화하는 효과를 만들 수 있습니다. 이를 위해서는 @keyframes 규칙으로 애니메이션 단계를 정의하고, animation 속성으로 이를 요소에 연결하면 됩니다.
아래 예제 코드를 직접 실행해 보면서 동작 방식을 확인해 보세요.
예제
<!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: blue;
border-left-width: 35px;
}
}
</style>
</head>
<body>
<h2>border-left-width 애니메이션 실행</h2>
<div></div>
</body>
</html>
코드 설명
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 키프레임 애니메이션을 3초 주기로 무한 반복 실행합니다.
- @keyframes myanim — 애니메이션이 진행되는 동안 스타일이 어떻게 변할지 정의하는 규칙입니다.
- 40% { ... } — 애니메이션 진행률이 40% 지점에 도달하면
border-left-width가 35px로,border-bottom-width는 50px로 변경됩니다. - 테두리 색상(
border-color,border-left-color,border-bottom-color)과 모서리 둥글기(border-bottom-right-radius)도 함께 애니메이션 처리되어 다양한 시각적 변화를 보여줍니다.
border-left-width는 애니메이션이 가능한(aninmatable) 속성이므로, keyframes 내에서 값을 변경하기만 하면 브라우저가 시작 값과 끝 값 사이를 자동으로 부드럽게 전환해 줍니다. 이 기법은 테두리 강조 효과나 인터랙티브한 UI 장식을 만들 때 유용하게 활용할 수 있습니다.