CSS offset-path(모션 경로) 속성으로 요소를 원형 경로 따라 이동시키는 방법

CSS의 offset-path 속성을 사용하면 요소가 따라 움직일 모션 경로(motion path)를 정의할 수 있습니다. 이 속성에 SVG 경로(path)를 지정하면, 해당 경로를 따라 요소를 자유롭게 애니메이션할 수 있습니다.

offset-path 속성의 기본 문법

offset-path 속성의 기본적인 사용 형식은 다음과 같습니다.

Selector {
    offset-path: /*값*/
}

경로 값은 주로 path() 함수를 사용하여 지정하며, 함수 안에는 SVG 좌표계 방식의 경로 데이터를 넣습니다. 예를 들어 path('M70,0 A70,70 0 1,1 70,140 A70,70 0 1,1 70,0')처럼 작성하면 반지름이 70px인 완전한 원형 경로가 만들어집니다.

원형 경로 예제

아래 예제는 offset-path 속성을 활용해 요소가 원형 경로를 따라 계속 회전하도록 구현한 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 5%;
    width: 35px;
    height: 35px;
    offset-path: path('M70,0 A70,70 0 1,1 70,140 A70,70 0 1,1 70,0');
    animation: round 3000ms infinite ease-in-out;
    background: darkseagreen;
    border-radius: 30%;
}
@keyframes round {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
</style>
</head>
<body>
<hr/>
<div></div>
</body>
</html>

코드 설명

offset-path: path() 함수로 원형 경로를 정의합니다. 두 개의 호(arc) 명령어(A)를 연결해 하나의 완전한 원을 그립니다.
@keyframes round: 애니메이션 시작점(0%)에서는 offset-distance가 0%, 끝점(100%)에서는 100%가 되도록 설정합니다. 즉, 요소가 경로의 처음부터 끝까지 한 바퀴 돌게 됩니다.
animation: 3000ms(3초) 동안 무한 반복(infinite)되며, ease-in-out 타이밍 함수로 부드러운 가속·감속 효과를 줍니다.
border-radius: 30%: 요소를 사각형이 아닌 둥근 모양으로 만들어 시각적으로 더 자연스럽게 표현했습니다.

실행 결과

위 코드를 실행하면 초록색(darkseagreen) 둥근 요소가 화면에서 원형 궤도를 따라 3초마다 한 바퀴씩 끊임없이 공전하는 것을 확인할 수 있습니다.

이처럼 offset-path와 offset-distance를 조합하면 복잡한 JavaScript 없이도 순수 CSS만으로 다양한 궤적 애니메이션을 쉽게 구현할 수 있습니다.