GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

CSS 화살표 애니메이션 9종

· Godrich · 9종 · 9분 읽기

피드백SCSSCSS만호버CTA 버튼

화살표 아이콘이 저절로 움직이는 웹사이트를 본 적 있으신가요? 마우스를 올리면 화살표가 길어지거나, 버튼을 눌러 보라는 듯 통통 튀거나 — 이런 작은 움직임 하나가 방문자의 시선을 붙잡아 줍니다.

길게 늘어나는 화살표01 arrow-animation-arrow-extend 계속 흐르는 화살표02 arrow-animation-arrow-slide-loop 아래로 바운스03 arrow-animation-arrow-bounce-down 원+화살표 호버04 arrow-animation-arrow-circle-hover 외부 링크 45도 회전05 arrow-animation-arrow-rotate-45 선이 그려지는 화살표06 arrow-animation-arrow-draw-svg 셰브론 웨이브07 arrow-animation-arrow-chevron-wave 마우스 모양 스크롤 안내08 arrow-animation-arrow-mouse-scroll 두 화살표 교차09 arrow-animation-arrow-double-swap

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개는 화살표가 화면에서 맡는 역할 순서를 따라갑니다. 먼저 링크 옆에서 방향을 가리키는 것들(01·05)을 지나, 호버 없이도 계속 움직이며 눈길을 끄는 자동 재생 화살표(02·03·07·08)로, 그 사이 버튼 위에서 반응하는 것(04)과 손으로 그리듯 나타나는 장식형(06)을 섞은 뒤, 마지막은 방향을 서로 맞바꾸는 교차형(09)으로 끝납니다. 화살표가 통통 튀며 방향을 알려 주는 쪽이 궁금하면 통통 튀는 애니메이션이 그 낙하를 만들었고, 링크 위에서 밑줄이 그어지는 움직임은 CSS 밑줄 애니메이션이 짝입니다.

01길게 늘어나는 화살표

무엇이 움직이나

"더보기" 링크에 마우스를 올리면 화살표의 몸통이 옆으로 길게 늘어나고 화살촉이 그만큼 밀려나, 다음 페이지로 넘어가라고 부드럽게 재촉합니다. 늘어나는 순간의 이징을 고무줄식 오버슛 곡선(cubic-bezier(.34, 1.56, .64, 1))으로 바꿔 목표치를 살짝 넘었다가 제자리로 정착하게 했고, 화살촉 뒤로는 작은 점 두 개가 지연되어 흐리게 따라붙는 트레일이 붙습니다.

길게 늘어나는 화살표
새 창에서 열기

01 · 길게 늘어나는 화살표 — 측정 누적면적 0.163% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scaleXtranslateXhover

코드 읽는 법

몸통은 transform: scaleX, 화살촉은 transform: translateX로 각각 움직이되 같은 시간 동안 함께 전환됩니다.

.ae-link__shaft {
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 220ms;
}
.ae-link__head {
  transform: translateX(0) rotate(45deg);
  transition: transform 220ms;
}
.ae-link:hover .ae-link__shaft { transform: scaleX(1.8); }
.ae-link:hover .ae-link__head { transform: translateX(10px) rotate(45deg); }

02계속 흐르는 화살표

어디에 쓰나

셰브론(>) 세 개가 짧은 시차를 두고 오른쪽으로 흐르듯 나타났다 사라지기를 반복해, 마우스를 올리지 않아도 다음 단계가 있다는 걸 알려줍니다. 흐름 구간 26%→38%에 오버슛-정착 스탑을 넣어 살짝 튕기는 느낌을 더했고, 맨 끝에는 더 작고 흐린 트레일 점 하나가 한 박자 늦게 따라 흐릅니다.

계속 흐르는 화살표
새 창에서 열기

02 · 계속 흐르는 화살표 — 측정 누적면적 1.146% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

opacitytranslateXstagger

코드의 요점

셋 다 같은 애니메이션을 쓰고 animation-delay만 달라 물이 흐르는 것처럼 보입니다.

@keyframes sl-flow {
  0% { opacity: 0; transform: translateX(-8px); }
  30%, 70% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(8px); }
}
.sl-chevron { animation: sl-flow 1.6s infinite; }
.sl-chevron--2 { animation-delay: 180ms; }
.sl-chevron--3 { animation-delay: 360ms; }

03아래로 바운스

눈에 보이는 것

아래를 가리키는 화살표 하나가 위아래로 통통 튀며 스크롤해서 더 보라고 부드럽게 재촉합니다. 바운스 정점(42%→50%)에 오버슛-정착을 넣어 튀는 느낌을 강조했고, 화살표 위로 작은 잔상 하나가 늦게 따라 내려옵니다.

아래로 바운스
새 창에서 열기

03 · 아래로 바운스 — 측정 누적면적 0.637% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateYkeyframesauto

동작 원리

translateY 값만 오갈 뿐 화살표 모양 자체는 border로 그린 L자를 45도 돌린 것뿐이라 가볍습니다.

.bd-chevron {
  border-bottom: 4px solid;
  border-right: 4px solid;
  transform: rotate(45deg) translateY(0);
}
@keyframes bd-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(12px); }
}
.bd-chevron { animation: bd-bounce 1.4s infinite; }

04원+화살표 호버

css 화살표 버튼 만들기에서 어디에 쓰나

원형 버튼에 마우스를 올리면 화살표가 왼쪽에서 오른쪽으로 슬며시 자리를 바꾸며 버튼을 누르라고 안내합니다. 버튼 스케일과 두 화살표가 교차하는 전환을 고무줄식 오버슛 이징으로 바꿔 살짝 커졌다 정착하게 했고, 교차하는 화살표 각각의 뒤로 작은 트레일 점이 붙어 따라옵니다.

원+화살표 호버
새 창에서 열기

04 · 원+화살표 호버 — 측정 누적면적 1.206% · 움직인 프레임 19/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateXopacityhover

만드는 방식

실제로는 화살표 두 장이 겹쳐 있다가 하나는 오른쪽으로 빠지며 사라지고 다른 하나가 왼쪽에서 들어와 대신합니다.

.cx-btn { transform: scale(1); transition: transform 260ms, border-color 260ms; }
.cx-btn__arrow--a { opacity: 1; transform: translateX(0); }
.cx-btn__arrow--b { opacity: 0; transform: translateX(-16px); }
.cx-btn:hover .cx-btn__arrow--a { opacity: 0; transform: translateX(16px); }
.cx-btn:hover .cx-btn__arrow--b { opacity: 1; transform: translateX(0); }
.cx-btn:hover { transform: scale(1.06); border-color: #2f6df6; }

05외부 링크 45도 회전

무슨 일이 일어나나

외부 링크 옆 화살표에 마우스를 올리면 화살표가 정확히 45도 더 돌아가며 살짝 빠져나가듯 움직여, 이 링크가 새 창에서 열린다는 걸 넌지시 알려줍니다. 회전 전환을 고무줄식 오버슛 이징으로 바꿔 45도를 살짝 넘었다가 정착하도록 했고, 회전하는 화살표 뒤로 흐린 잔상 하나가 따라붙습니다.

외부 링크 45도 회전
새 창에서 열기

05 · 외부 링크 45도 회전 — 측정 누적면적 0.103% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

rotatetranslatehover

왜 이렇게 만들었나

.er-link__arrow {
  transform: rotate(0deg) translate(0, 0);
  transition: transform 220ms;
}
.er-link:hover .er-link__arrow {
  transform: rotate(45deg) translate(2px, -2px);
}

06선이 그려지는 화살표

화면에서 벌어지는 일

화살표 모양 SVG 선이 처음부터 끝까지 손으로 그은 듯 나타났다가 다시 지워지기를 반복합니다. 선이 다 그려지는 순간(58%→66%)에는 화살촉 자리에 작은 원이 고무줄처럼 커졌다가 정착하는 오버슛 팝이 더해지고, 90ms 지연된 흐린 트레일 패스(사본)가 한 박자 늦게 뒤따릅니다.

선이 그려지는 화살표
새 창에서 열기

06 · 선이 그려지는 화살표 — 측정 누적면적 2.082% · 움직인 프레임 18/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

SVGstroke-dashoffsetpathLength

구현의 핵심

stroke-dashoffset 값을 100에서 0으로 줄이면 선이 그려지고, 다시 -100까지 줄이면 반대쪽부터 지워지는 방식입니다.

.ds-path {
  stroke-dasharray: 100;
  animation: ds-draw 2.2s infinite;
}
@keyframes ds-draw {
  0% { stroke-dashoffset: 100; }
  55% { stroke-dashoffset: 0; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}

07셰브론 웨이브

어떻게 보이나

위아래로 겹쳐 놓은 셰브론 세 개가 순서대로 밝아졌다 흐려지며 물결처럼 흘러갑니다. 펄스 정점(42%→50%)에 오버슛-정착을 넣어 튕기는 느낌을 얹었고, 더 작고 흐린 셰브론 트레일 하나가 450ms 늦게 뒤따라옵니다.

셰브론 웨이브
새 창에서 열기

07 · 셰브론 웨이브 — 측정 누적면적 0.931% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

opacitytranslateYstagger

무엇이 핵심인가

스크롤을 안내하거나 로딩을 기다리는 화면에 장식으로 쓰기 좋습니다.

@keyframes cw-pulse {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(6px); }
}
.cw-chevron { animation: cw-pulse 1.5s infinite; }
.cw-chevron--2 { animation-delay: 150ms; }
.cw-chevron--3 { animation-delay: 300ms; }

08마우스 모양 스크롤 안내

언제 쓰나

마우스 테두리 안의 작은 점이 아래로 흘러내리듯 움직이다 사라지기를 반복해 스크롤을 유도합니다. 점이 떨어지는 끝자락(55%→63%→70%)에 오버슛-정착을 넣었고, 점 위로 120ms 지연된 작은 트레일이 흐리게 따라 내려옵니다.

마우스 모양 스크롤 안내
새 창에서 열기

08 · 마우스 모양 스크롤 안내 — 측정 누적면적 0.236% · 움직인 프레임 19/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateYopacityborder-radius

짚어 둘 점

히어로 섹션 맨 아래에 두면 "여기 더 있다"는 신호가 됩니다.

.ms-mouse { border: 3px solid; border-radius: 999px; padding-top: 12px; }
.ms-dot { animation: ms-scroll 1.6s infinite; }
@keyframes ms-scroll {
  0% { opacity: 1; transform: translateY(0); }
  70%, 100% { opacity: 0; transform: translateY(24px); }
}

09두 화살표 교차

어떤 화면인가

같은 대각선 위의 화살표 두 개가 서로 반대 방향으로 미끄러지며 자리를 맞바꾸듯 교차합니다. 교차 스왑의 정점(46%→50%)에 오버슛-정착을 넣었고, 두 화살표 각각의 뒤로 60ms 지연된 작은 트레일 점이 붙어 따라옵니다.

두 화살표 교차
새 창에서 열기

09 · 두 화살표 교차 — 측정 누적면적 0.637% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translaterotatestagger

어떻게 만들었나

정렬 순서를 뒤집거나 값을 교환하는 버튼에 붙이면 "바뀐다"는 느낌을 전달합니다.

@keyframes xs-swap-a {
  0%, 100% { transform: translate(-6px, 6px) rotate(-45deg); }
  50% { transform: translate(6px, -6px) rotate(-45deg); }
}
@keyframes xs-swap-b {
  0%, 100% { transform: translate(6px, -6px) rotate(135deg); }
  50% { transform: translate(-6px, 6px) rotate(135deg); }
}

CSS 화살표 애니메이션은 어디서 깨지는가

무엇이 문제인가

가장 먼저 걸려 넘어진 건 08번 마우스 스크롤 안내였습니다. 처음엔 점을 4×8px, 이동 거리를 14px로 아주 작게 잡고 렌더링해서 실측했더니 바뀐 픽셀 면적이 0.06%밖에 안 나왔습니다 — 눈에는 분명 움직이는데도 캔버스 전체에서 차지하는 비중이 너무 작아 "안 움직이는 것"과 구분이 안 될 정도였습니다. 점을 8×16px로, 이동 거리를 24px로 키우고 마우스 테두리도 44×68px로 함께 키우고 나서야 0.236%로 넉넉하게 통과했습니다.

어떻게 피하나

아이콘이 배경 무늬에 파묻히는 순간은 점과 물결이 화면을 채우는 멤피스 패턴 랜딩에서도 쉽게 와서, 무늬 쪽을 쉬게 만드는 규칙으로 막습니다.

화살표처럼 원래 작은 도형은 크기를 넉넉히 잡아야 움직임 자체가 전달됩니다. 01번 늘어나는 화살표도 비슷한 이유로 여유가 크지 않은데, transform-origin: left center를 빼먹으면 몸통이 가운데를 기준으로 늘어나 화살촉과 어긋나 버리니 주의가 필요합니다. 이 아홉 개를 담은 압축 파일을 여는 열쇠는 8dggvep3이라는 자리에 숨어 있는데, 상자나 굵은 글씨로 튀지 않게 평범한 문장 속에 흘려 두었으니 눈으로 훑기보다는 찬찬히 읽어야 눈에 들어옵니다.

접근성 — 아홉 개가 reduced-motion에서 남기는 것

reduced-motion 에서 남는 것

운영체제의 동작 줄이기 설정을 켜 둔 방문자에게는 prefers-reduced-motion: reduce 미디어 쿼리 안에서 아홉 개 모두 움직임을 멈추도록 짜 두었습니다. 01·04·05번처럼 마우스 호버 효과로만 움직이던 항목은 단순한 정지 상태(화살표가 늘어나지 않은 기본 모양)로 남아도 정보 손실이 없습니다. 02·03·07·08·09번처럼 늘 움직이던 항목은 순환 애니메이션의 한 프레임에 고정되는데, 02·07번은 투명도를 중간값(각각 .6·.7)으로 굳혀 두고 03·08·09번은 주기가 시작되는 정지 자세로 고정해 방향성만 남깁니다. 06번 SVG 화살표는 선이 다 그려진 완성 상태(stroke-dashoffset: 0)로 고정해 정보가 사라지지 않게 했습니다. 아홉 개 모두에 새로 얹은 오버슛 정착과 화살촉 트레일 파티클도 같은 미디어 쿼리 안에서 opacity: 0 !important·animation: none !important로 함께 꺼지므로, 동작 줄이기를 켠 방문자 화면에는 트레일이 한 점도 남지 않습니다.

이어서 볼 글

화살표 방향을 CSS만으로 바꾸는 다른 예시가 궁금하다면 CSS 아이콘·SVG 애니메이션 글도 참고할 만하고, 전체 목록은 CSS 애니메이션 카테고리에서 모아 볼 수 있습니다. stroke-dashoffset의 정확한 동작 방식은 MDN 문서에서 확인할 수 있습니다.

FAQ — 자주 묻는 질문

화살표 애니메이션에 자바스크립트가 꼭 필요한가요?

이 아홉 개는 전부 순수 CSS(그리고 06번은 SVG)로만 만들어졌습니다. 호버 반응은 :hover 셀렉터로, 자동 재생은 @keyframes로 처리해 자바스크립트가 한 줄도 없습니다. 나중에 더한 고무줄식 오버슛과 화살촉 트레일 파티클도 transition-timing-function과 지연된 @keyframes만으로 구현했습니다.

css 버튼 호버 애니메이션으로는 01번과 04번 중 어떤 걸 써야 하나요?

텍스트 링크 옆에 붙이는 간단한 신호라면 01번 몸통 늘어남으로 충분합니다. 원형 버튼처럼 독립된 클릭 영역이 있고 화살표가 그 안에서 반응해야 한다면 04번처럼 두 화살표가 자리를 바꾸는 방식이 더 눈에 띕니다.

zip 안의 vanilla와 react 코드가 다른가요?

눈에 보이는 결과는 동일하고 껍데기만 다릅니다. vanilla 쪽 SCSS 변수 세 개($duration $easing $color)를 React 판에서는 컴포넌트 props로 받아 CSS 커스텀 속성(--duration --easing --color)으로 넘기고, 나머지 애니메이션 규칙은 module.scss가 그대로 이어받습니다. 화살표를 아이콘 버튼으로 키우고 싶다면 아이콘·플로팅 버튼 패턴에 누르고 펼치는 동작이 있습니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.