CSS에서는 @keyframes 규칙과 animation 속성을 조합하면 요소의 테두리(border) 두께, 스타일, 색상까지 부드럽게 애니메이션 처리할 수 있습니다. 이 글에서는 테두리 애니메이션의 기본 원리와 함께 바로 사용할 수 있는 실전 예제를 소개합니다.
테두리 애니메이션의 기본 원리
테두리와 관련된 속성인 border-width, border-style, border-color는 모두 애니메이션이 가능한 속성입니다. 따라서 @keyframes 안에서 특정 시점(예: 20%, 50%)에 테두리 값을 변경해 주면, 브라우저가 시작 값과 끝 값 사이를 자동으로 보간하여 자연스러운 전환 효과를 만들어 줍니다.
예제 코드
아래 예제는 노란색 배경 위에 점선(dashed) 테두리가 주황색 실선(solid) 테두리로 두꺼워지며 변화하는 애니메이션입니다. 배경 이미지의 위치와 크기도 함께 애니메이션됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 400px;
background: yellow;
border: 5px dashed yellow;
background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');
animation: myanim 3s infinite;
background-position: bottom left;
background-size: 50px;
}
@keyframes myanim {
20% {
background-color: maroon;
background-position: bottom right;
background-size: 90px;
border: 25px solid orange;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>코드 핵심 포인트
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 키프레임을 3초 동안 실행하고, 무한 반복(infinite)하도록 설정합니다.
- @keyframes myanim { 20% } — 애니메이션 진행률 20% 지점에서 테두리가 5px 점선 노란색에서 25px 실선 주황색으로 변합니다.
- background-position / background-size — 테두리와 함께 배경 이미지의 위치(왼쪽 하단 → 오른쪽 하단)와 크기(50px → 90px)도 동시에 애니메이션됩니다.
마무리
이처럼 CSS만으로도 JavaScript 없이 테두리 애니메이션을 손쉽게 구현할 수 있습니다. 버튼 강조 효과, 카드 호버(hover) 인터랙션, 로딩 표시 등 다양한 UI 요소에 응용해 보세요. transition 속성과 함께 사용하면 마우스 오버 시에도 매끄러운 테두리 변화 효과를 만들 수 있습니다.