CSS에서 border-top-width 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙과 함께 해당 속성의 값을 단계별로 변경하는 방식을 사용합니다. 아래 예제 코드를 실행하여 실제 동작을 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 300px;
background: yellow;
border: 10px solid yellow;
background-image: url('https://www.tutorialspoint.com/latest/Angular-4.png');
animation: myanim 3s infinite;
background-position: bottom left;
background-size: 50px;
}
@keyframes myanim {
20% {
background-color: maroon;
background-size: 90px;
border-color: red;
border-top-width: 50px;
}
}
</style>
</head>
<body>
<h2>border-top-width 애니메이션 데모</h2>
<div></div>
</body>
</html>코드 설명
위 예제의 핵심 동작 원리는 다음과 같습니다.
1. 기본 스타일 설정: div 요소는 500×300px 크기로 지정되고, 노란색 배경 위에 두께 10px의 노란색 테두리가 적용됩니다. 배경 이미지는 왼쪽 하단에 위치하며 크기는 50px입니다.
2. 애니메이션 정의: animation: myanim 3s infinite; 선언을 통해 'myanim'이라는 이름의 keyframes가 3초 주기로 무한 반복 실행됩니다.
3. @keyframes 규칙: 애니메이션이 전체 진행 시간의 20% 지점에 도달하면 다음 값들로 부드럽게 전환됩니다.
background-color: maroon;— 배경색이 밤색으로 변경background-size: 90px;— 배경 이미지 크기 확대border-color: red;— 테두리 색상이 빨간색으로 변경border-top-width: 50px;— 상단 테두리 두께가 10px에서 50px로 증가
이처럼 border-top-width는 수치형(length) 속성이므로 중간값으로 보간(interpolation)할 수 있어, CSS 트랜지션이나 keyframes 애니메이션에서 자연스러운 두께 변화 효과를 만들 수 있습니다.