CSS border-bottom-color 속성으로 애니메이션 효과 구현하기

CSS border-bottom-color 속성 애니메이션 구현 방법

CSS에서 border-bottom-color 속성에 애니메이션을 적용하면 요소의 아래쪽 테두리 색상이 부드럽게 변화하는 효과를 만들 수 있습니다. 이를 위해서는 @keyframes 규칙으로 애니메이션의 단계별 스타일 변화를 정의한 뒤, animation 속성을 통해 해당 요소에 적용하면 됩니다.

아래 예제 코드를 직접 실행해 보세요.

예제

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 500px;
        height: 400px;
        background: yellow;
        border: 10px solid 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-bottom-color: green;
        }
    }
</style>
</head>
<body>
<h2>Performing Animation for bottom border color</h2>
<div></div>
</body>
</html>

코드 설명

animation: myanim 3s infinite; — div 요소에 'myanim'이라는 이름의 애니메이션을 3초 동안 무한 반복하도록 설정합니다.
@keyframes myanim — 애니메이션 진행률 20% 시점에서 여러 스타일 속성이 변경되도록 정의합니다.
border-bottom-color: green; — 애니메이션이 진행되면서 아래쪽 테두리 색상이 노란색(yellow)에서 초록색(green)으로 자연스럽게 전환됩니다.

이처럼 @keyframes 안에서 border-bottom-color 값을 변경하면, 별도의 JavaScript 없이 순수 CSS만으로 테두리 색상 애니메이션을 손쉽게 구현할 수 있습니다.