CSS outline-color 애니메이션 소개
CSS에서 outline-color 속성은 요소의 외곽선(아웃라인) 색상을 지정합니다. 이 속성에 애니메이션 효과를 적용하면 외곽선의 색상이 부드럽게 변화하는 시각적 효과를 만들 수 있습니다.
애니메이션을 구현하려면 @keyframes 규칙을 사용해 색상 변화의 중간 지점을 정의하고, animation 속성으로 이를 요소에 적용하면 됩니다.
예제 코드
아래 예제는 파란색 외곽선이 주황색으로 반복적으로 전환되는 애니메이션을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 550px;
height: 350px;
outline: 2px solid blue;
animation: myanim 3s infinite;
}
@keyframes myanim {
50% {
outline-color: orange;
}
}
</style>
</head>
<body>
<h1>CSS outline-color 속성</h1>
<div> </div>
</body>
</html>코드 설명
- outline: 2px solid blue; — div 요소에 두께 2px의 파란색 실선 외곽선을 설정합니다.
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 애니메이션을 3초 동안 무한히 반복 실행합니다.
- @keyframes myanim { 50% { ... } } — 애니메이션 진행률이 50%에 도달했을 때 외곽선 색상이 주황색(orange)으로 변경되도록 정의합니다.
이처럼 @keyframes 내에서 특정 진행 구간의 outline-color 값을 지정하면, 브라우저가 시작 색상과 끝 색상 사이를 자동으로 보간하여 부드러운 색상 전환 효과를 완성합니다.