CSS에서 border-bottom-width 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙을 활용하면 됩니다. 아래 예제 코드를 실행하면 요소의 하단 테두리 두께가 부드럽게 변화하는 애니메이션을 확인할 수 있습니다.
예제 코드
<!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/electronic_measuring_instruments.png');
animation: myanim 3s infinite;
background-position: bottom left;
background-size: 50px;
}
@keyframes myanim {
20% {
background-color: maroon;
background-size: 90px;
border-bottom-color: green;
border-bottom-right-radius: 50px;
border-bottom-width: 50px;
}
}
</style>
</head>
<body>
<h2>하단 테두리 두께 애니메이션 실행</h2>
<div></div>
</body>
</html>코드 설명
위 예제의 핵심 동작 원리는 다음과 같습니다.
1. 초기 스타일 설정
div 요소에 너비 500px, 높이 300px를 지정하고, 하단 테두리 두께(border-bottom-width)를 30px로 설정합니다. 또한 배경 이미지와 함께 animation: myanim 3s infinite;를 적용해 3초 주기로 무한 반복되는 애니메이션을 정의합니다.
2. @keyframes로 애니메이션 정의@keyframes myanim 내부의 20% 지점에서 하단 테두리 두께가 30px에서 50px로 변화합니다. 이와 함께 테두리 색상(border-bottom-color), 오른쪽 하단 모서리 둥글기(border-bottom-right-radius), 배경 크기 등도 함께 전환되어 더욱 역동적인 효과를 연출합니다.
이처럼 border-bottom-width는 애니메이션이 가능한 속성이므로, @keyframes와 animation 속성을 조합하면 테두리 두께가 시간에 따라 부드럽게 변하는 인터랙티브한 UI를 쉽게 만들 수 있습니다.