CSS만으로 구현하는 원형 애니메이션
JavaScript나 Canvas 없이도 순수 CSS만으로 동적인 원형 애니메이션을 만들 수 있다는 사실을 알고 계셨나요? 이번 글에서는 border-radius 속성과 투명한 배경을 활용해 부드럽게 회전하는 원을 그리는 방법을 소개합니다.
핵심 아이디어는 간단합니다. 원형 요소의 테두리 중 일부에만 색상을 지정하고 나머지는 투명하게 처리한 뒤, 이를 키프레임 애니메이션으로 회전시키면 마치 로딩 스피너처럼 자연스러운 원형 애니메이션이 완성됩니다.
CSS 코드
아래 CSS를 사용하면 투명한 배경 위에서 border-radius로 그려진 원이 회전하며 애니메이션됩니다.
body {
background: repeating-linear-gradient(45deg, white 0px, green 100px);
height: 400px;
background-size: 400px 400px;
background-repeat: no-repeat;
}
html {
height: 100%;
}
#box {
position: absolute;
width: 400px;
height: 400px;
border: solid blue 2px;
animation: colors 5s infinite;
}
#demo {
width: 50%;
height: 100%;
right: 0px;
position: absolute;
overflow: hidden;
transform-origin: left center;
animation: cliprotate 18s steps(2) infinite;
-webkit-animation: cliprotate 18s steps(2) infinite;
}
.circlehalf {
box-sizing: border-box;
height: 100%;
right: 0px;
position: absolute;
border: solid 20px transparent;
border-top-color: blue;
border-left-color: blue;
border-radius: 50%;
}
#clipped {
width: 200%;
animation: rotate 8s linear infinite;
-webkit-animation: rotate 8s linear infinite;
}
#fixed {
width: 100%;
transform: rotate(145deg);
animation: showfixed 18s steps(2) infinite;
-webkit-animation: showfixed 18s linear infinite;
}
@-webkit-keyframes cliprotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes cliprotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
0% {transform: rotate(-45deg);}
100% {transform: rotate(135deg);}
}
@keyframes rotate {
0% {transform: rotate(-45deg);}
100% {transform: rotate(135deg);}
}
@-webkit-keyframes showfixed {
0% {opacity: 0;}
49.9% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}HTML 구조
다음은 위 CSS와 함께 사용되는 HTML 마크업입니다. 두 개의 반원 요소가 조합되어 하나의 완전한 원형 애니메이션을 형성합니다.
<div id = "box">
<div id = "demo">
<div class = "circlehalf" id = "clipped">
</div>
</div>
<div class = "circlehalf" id = "fixed">
</div>
</div>
동작 원리 살펴보기
이 애니메이션이 작동하는 방식은 다음과 같습니다.
1. 반원 요소 생성: .circlehalf 클래스는 20px 두께의 테두리를 가지며, 상단(border-top-color)과 좌측(border-left-color)만 파란색으로 지정하고 나머지는 투명 처리합니다. border-radius: 50% 덕분에 요소가 완벽한 원 형태로 렌더링됩니다.
2. 클리핑과 회전: #demo 영역은 overflow: hidden으로 절반을 가리고, cliprotate 키프레임을 통해 360도 회전합니다. 내부의 #clipped 요소는 별도의 rotate 애니메이션으로 움직여 역동적인 효과를 만듭니다.
3. 고정 반원의 전환: #fixed 요소는 showfixed 키프레임에 따라 애니메이션 진행률 50% 시점에 opacity가 0에서 1로 전환되어, 화면이 자연스럽게 이어지도록 보완합니다.
이 기법은 로딩 인디케이터, 프로그레스 링, 대시보드 위젯 등 다양한 UI 요소에 응용할 수 있으며, 추가 라이브러리 없이 경량으로 구현할 수 있다는 장점이 있습니다.