CSS에서 outline(아웃라인) 속성에 애니메이션을 적용하면 요소의 외곽선 색상, 두께, 스타일이 부드럽게 변화하는 시각적 효과를 만들 수 있습니다. 이 글에서는 @keyframes 규칙과 함께 outline 속성에 애니메이션을 구현하는 방법을 예제 코드와 함께 자세히 알아보겠습니다.
outline 속성 애니메이션이란?
outline은 요소의 테두리 바깥쪽에 그려지는 선으로, border와 달리 레이아웃 공간을 차지하지 않습니다. CSS 애니메이션을 활용하면 이 외곽선의 두께(width), 스타일(style), 색상(color)을 일정한 주기로 반복 변경하여 눈길을 끄는 동적 효과를 연출할 수 있습니다.
애니메이션을 적용하려면 다음 두 가지가 필요합니다.
- animation 속성: 애니메이션 이름, 지속 시간, 반복 횟수 등을 지정합니다.
- @keyframes 규칙: 애니메이션의 시작과 끝(또는 중간) 상태에서 outline 값이 어떻게 변할지 정의합니다.
예제 코드
다음 예제는 파란색 실선 외곽선이 3초 주기로 주황색 점선으로 부드럽게 전환되는 애니메이션입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 550px;
height: 350px;
outline: 1px solid blue;
animation: myanim 3s infinite;
}
@keyframes myanim {
50% {
outline: 10px dashed orange;
}
}
</style>
</head>
<body>
<h1>CSS outline 속성 애니메이션</h1>
<div></div>
</body>
</html>
코드 상세 설명
1. 기본 스타일 설정
div 요소에 너비 550px, 높이 350px를 지정하고, 초기 outline 값을 1px solid blue(1px 두께의 파란색 실선)로 설정했습니다.
2. animation 속성
animation: myanim 3s infinite; 구문의 의미는 다음과 같습니다.
- myanim: 적용할 @keyframes 애니메이션의 이름
- 3s: 한 번의 애니메이션 사이클 지속 시간 (3초)
- infinite: 무한 반복
3. @keyframes 규칙
50% 지점에서 outline이 10px dashed orange(10px 두께의 주황색 점선)로 변경됩니다. 즉, 애니메이션이 진행되는 동안 외곽선이 얇은 실선에서 두꺼운 점선으로, 색상도 파란색에서 주황색으로 자연스럽게 전환됩니다.
실행 결과
브라우저에서 위 코드를 실행하면 div 요소의 외곽선이 다음과 같이 반복적으로 변하는 것을 확인할 수 있습니다.
- 0% ~ 50%: 파란색 1px 실선 → 주황색 10px 점선으로 서서히 변화
- 50% ~ 100%: 다시 원래의 파란색 실선 상태로 돌아옴
참고 사항
outline 애니메이션은 버튼 포커스 강조, 알림 효과, 호버(hover) 반응형 디자인 등 다양한 UI 요소에 활용할 수 있습니다. 또한 animation-direction, animation-timing-function 등의 하위 속성을 추가하면 더욱 세밀하게 애니메이션 흐름을 제어할 수 있습니다.