矢印 CSS アニメーション9選【コピペOK】

Q: 矢印アニメーションにJavaScriptは必要ですか?

この9個はすべて純粋なCSS(06番のみSVGを併用)だけで作られています。ホバーへの反応は:hoverセレクター、自動再生は@keyframesだけで処理していて、JavaScriptは一行も使っていません。

Q: zipの中のvanillaとreactのコードは違いますか?

画面に見える動きは同じで、中身の受け渡し方だけが異なります。vanilla側のSCSS変数3つ($duration $easing $color)を、React版ではコンポーネントのpropsとして受け取り、内部でCSSカスタムプロパティ(--duration --easing --color)に変換して渡しています。矢印をアイコンボタンへ育てたいなら、アイコン・フローティングボタンのパターンに押して広がる動きがあります。

2026-09-10 · Godrich · 9種 · 8分で読める

フィードバック SCSS CSSのみホバー CTAボタン

リンクの矢印にマウスを乗せた瞬間にすっと伸びたり、ボタンの矢印が絶えずゆっくり跳ねたりする動きを見たことはありませんか。この記事はそうした矢印 css アニメーションを、一行でコピペOKなコード9個にまとめたものです。

01 arrow-animation-arrow-extend

02 arrow-animation-arrow-slide-loop

03 arrow-animation-arrow-bounce-down

04 arrow-animation-arrow-circle-hover

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

自動再生 · タイルを押すとその項目へ · すべて1つのzip

01 伸びる矢印
02 流れ続ける矢印
03 下に跳ねる
04 円+矢印ホバー
05 外部リンク45度回転
06 線が描かれる矢印
07 シェブロンウェーブ
08 マウス型スクロール案内
09 2本の矢印が入れ替わる

9個は、矢印が画面で担う役割の順に並んでいます。最初はリンクの横で方向を示すもの(01・05)、続いてマウス操作なしでも動き続けて目を引く自動再生タイプ(02・03・07・08)、そのあいだにボタンの上で反応するもの(04)と手描き風の演出(06)を挟み、最後は位置を入れ替える交差型(09)で締めくくります。矢印が弾みながら方向を知らせる側に興味があればバウンスアニメーションがその落下を作っており、リンクの上で線が引かれる動きはCSS下線アニメーションが相棒です。

01伸びる矢印

何が動くか

「続きを読む」のようなリンクにマウスを乗せると、矢印の軸(棒の部分)がすっと横に伸び、先端の矢じりもその分だけ右へ動きます。

<main class="stage">
  <a class="ae-link is-demo" href="#">
    <span class="ae-link__label">Learn more</span>
    <span class="ae-link__arrow">
      <span class="ae-link__shaft"></span>
      <span class="ae-link__head"></span>
      <span class="ae-link__trail ae-link__trail--1" aria-hidden="true"></span>
      <span class="ae-link__trail ae-link__trail--2" aria-hidden="true"></span>
    </span>
  </a>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop;   // is-demo 강제 루프 주기(캡처용). 실제 호버 전환은 아래 220ms 를 쓴다
$easing: $ease-elastic;  // 고무줄식 오버슛 — 늘어났다 살짝 되돌아와 멈춘다
$color: $subject-cream;

@include stage($stage-ink);

.ae-link {
  display: inline-flex;
  align-items: center;
  gap: $sp-2;
  color: $color;
  text-decoration: none;
  font: 600 16px/1 -apple-system, "Segoe UI", sans-serif;
}

.ae-link__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 26px;
  height: 12px;
}

.ae-link__shaft {
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: $color;
  transform-origin: left center; // 규칙8: 화살대 왼쪽서 늘어남
  transform: scaleX(1);
  transition: transform 260ms $easing;
}

.ae-link__head {
  position: absolute;
  left: 10px;
  width: 8px;
  height: 8px;
  border-top: 2px solid $color;
  border-right: 2px solid $color;
  transform: translateX(0) rotate(45deg);
  transition: transform 260ms $easing;
}

// 화살촉 트레일 파티클 — 신장하는 동안 화살촉 뒤로 작은 점 두 개가 지연·감쇠하며 따라붙는다
.ae-link__trail {
  position: absolute;
  left: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: $color;
  opacity: 0;
}

// 실사용: 링크에 마우스를 올리면 몸통(shaft)이 길게 늘어나고 화살촉(head)이 따라 밀려난다. $easing 이 고무줄 오버슛을 만든다
.ae-link:hover .ae-link__shaft { transform: scaleX(1.8); }
.ae-link:hover .ae-link__head { transform: translateX(10px) rotate(45deg); }

@keyframes ae-trail-hover {
  0%   { opacity: 0; transform: translateX(0) scale(.6); }
  45%  { opacity: .5; transform: translateX(5px) scale(1); }
  100% { opacity: 0; transform: translateX(9px) scale(.4); }
}
.ae-link:hover .ae-link__trail--1 { animation: ae-trail-hover 420ms $ease-out forwards; }
.ae-link:hover .ae-link__trail--2 { animation: ae-trail-hover 420ms $ease-out 70ms forwards; }

// 데모 루프: is-demo 는 :hover 를 흉내 낸 keyframes 로 무한 반복 (헤드리스는 :hover 를 못 건다)
@keyframes ae-extend-shaft {
  0%, 20% { transform: scaleX(1); }
  50%, 70% { transform: scaleX(1.8); }
  100% { transform: scaleX(1); }
}
@keyframes ae-extend-head {
  0%, 20% { transform: translateX(0) rotate(45deg); }
  50%, 70% { transform: translateX(10px) rotate(45deg); }
  100% { transform: translateX(0) rotate(45deg); }
}
@keyframes ae-trail-loop {
  0%, 20%   { opacity: 0; transform: translateX(0) scale(.6); }
  38%       { opacity: .5; transform: translateX(5px) scale(1); }
  50%, 70%  { opacity: 0; transform: translateX(9px) scale(.4); }
  100%      { opacity: 0; transform: translateX(0) scale(.6); }
}
.ae-link.is-demo .ae-link__shaft { animation: ae-extend-shaft $duration $easing infinite; }
.ae-link.is-demo .ae-link__head { animation: ae-extend-head $duration $easing infinite; }
.ae-link.is-demo .ae-link__trail--1 { animation: ae-trail-loop $duration $ease-out infinite; }
.ae-link.is-demo .ae-link__trail--2 { animation: ae-trail-loop $duration $ease-out 60ms infinite; }

@media (prefers-reduced-motion: reduce) {
  .ae-link:hover .ae-link__shaft,
  .ae-link.is-demo .ae-link__shaft {
    animation: none !important;
    transition: none !important;
    transform: scaleX(1) !important;
  }
  .ae-link:hover .ae-link__head,
  .ae-link.is-demo .ae-link__head {
    animation: none !important;
    transition: none !important;
    transform: translateX(0) rotate(45deg) !important;
  }
  .ae-link__trail,
  .ae-link:hover .ae-link__trail,
  .ae-link.is-demo .ae-link__trail {
    animation: none !important;
    opacity: 0 !important;
  }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ae-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff7e6;
  text-decoration: none;
  font: 600 16px/1 -apple-system, "Segoe UI", sans-serif;
}

.ae-link__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 26px;
  height: 12px;
}

.ae-link__shaft {
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: #fff7e6;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ae-link__head {
  position: absolute;
  left: 10px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff7e6;
  border-right: 2px solid #fff7e6;
  transform: translateX(0) rotate(45deg);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ae-link__trail {
  position: absolute;
  left: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff7e6;
  opacity: 0;
}

.ae-link:hover .ae-link__shaft {
  transform: scaleX(1.8);
}

.ae-link:hover .ae-link__head {
  transform: translateX(10px) rotate(45deg);
}

@keyframes ae-trail-hover {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.6);
  }
  45% {
    opacity: 0.5;
    transform: translateX(5px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(9px) scale(0.4);
  }
}
.ae-link:hover .ae-link__trail--1 {
  animation: ae-trail-hover 420ms ease-out forwards;
}

.ae-link:hover .ae-link__trail--2 {
  animation: ae-trail-hover 420ms ease-out 70ms forwards;
}

@keyframes ae-extend-shaft {
  0%, 20% {
    transform: scaleX(1);
  }
  50%, 70% {
    transform: scaleX(1.8);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes ae-extend-head {
  0%, 20% {
    transform: translateX(0) rotate(45deg);
  }
  50%, 70% {
    transform: translateX(10px) rotate(45deg);
  }
  100% {
    transform: translateX(0) rotate(45deg);
  }
}
@keyframes ae-trail-loop {
  0%, 20% {
    opacity: 0;
    transform: translateX(0) scale(0.6);
  }
  38% {
    opacity: 0.5;
    transform: translateX(5px) scale(1);
  }
  50%, 70% {
    opacity: 0;
    transform: translateX(9px) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(0) scale(0.6);
  }
}
.ae-link.is-demo .ae-link__shaft {
  animation: ae-extend-shaft 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.ae-link.is-demo .ae-link__head {
  animation: ae-extend-head 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.ae-link.is-demo .ae-link__trail--1 {
  animation: ae-trail-loop 2s ease-out infinite;
}

.ae-link.is-demo .ae-link__trail--2 {
  animation: ae-trail-loop 2s ease-out 60ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ae-link:hover .ae-link__shaft,
  .ae-link.is-demo .ae-link__shaft {
    animation: none !important;
    transition: none !important;
    transform: scaleX(1) !important;
  }
  .ae-link:hover .ae-link__head,
  .ae-link.is-demo .ae-link__head {
    animation: none !important;
    transition: none !important;
    transform: translateX(0) rotate(45deg) !important;
  }
  .ae-link__trail,
  .ae-link:hover .ae-link__trail,
  .ae-link.is-demo .ae-link__trail {
    animation: none !important;
    opacity: 0 !important;
  }
}

import { CSSProperties } from "react";
import styles from "./ExtendingArrow.module.scss";

export interface ExtendingArrowProps {
  duration?: string;
  easing?: string;
  color?: string;
}

// 실사용: :hover 만으로 동작한다. is-demo 강제 루프는 넣지 않는다 (블로그공장 react 컨벤션)
export default function ExtendingArrow({
  duration = "260ms",
  easing = "cubic-bezier(.34, 1.56, .64, 1)",
  color = "#fff7e6",
}: ExtendingArrowProps) {
  const style = { "--duration": duration, "--easing": easing, "--color": color } as CSSProperties;
  return (
    <a className={styles.link} href="#" style={style}>
      <span>Learn more</span>
      <span className={styles.arrow}>
        <span className={styles.shaft} />
        <span className={styles.head} />
        <span className={`${styles.trail} ${styles.trail1}`} aria-hidden="true" />
        <span className={`${styles.trail} ${styles.trail2}`} aria-hidden="true" />
      </span>
    </a>
  );
}

新しいタブで開く

01 · 伸びる矢印 — 計測累積面積 0.163% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scaleXtranslateXhover

コードの読み方

軸はtransform: scaleX、矢じりはtransform: translateXを使い、どちらも同じ220ミリ秒で一緒に切り替わります。新たに伸びる動きへ$ease-elastic(cubic-bezier(.34,1.56,.64,1))のゴムひも状オーバーシュートを足し、矢じりの後ろには時間差で減衰しながら追いかける点2つのトレイルも付きました。

.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流れ続ける矢印

どこで使うか

矢印(シェブロン)が3つ並び、マウスを乗せなくても右へ向かって順番に浮かび上がっては消えることを繰り返します。

<main class="stage">
  <div class="sl-row" aria-hidden="true">
    <span class="sl-chevron sl-chevron--1"></span>
    <span class="sl-chevron sl-chevron--2"></span>
    <span class="sl-chevron sl-chevron--3"></span>
    <span class="sl-trail"></span>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: 1.6s;
$easing: $ease-out;
$color: $subject-ink;

@include stage($stage-yellow);

.sl-row {
  display: flex;
  align-items: center;
  gap: $sp-3;
}

.sl-chevron {
  width: 20px;
  height: 20px;
  border-top: 4px solid $color;
  border-right: 4px solid $color;
  transform: rotate(45deg) translateX(-8px);
  opacity: 0;
}

// 실사용·자동재생 공통: 세 개가 짧은 시차를 두고 같은 방향으로 흐른다. 26%에서 살짝 오버슛했다 38%에서 정착한다(고무줄 신장)
@keyframes sl-flow {
  0%   { opacity: 0; transform: rotate(45deg) translateX(-8px); }
  26%  { opacity: 1; transform: rotate(45deg) translateX(3px); }
  38%  { opacity: 1; transform: rotate(45deg) translateX(0); }
  70%  { opacity: 1; transform: rotate(45deg) translateX(0); }
  100% { opacity: 0; transform: rotate(45deg) translateX(8px); }
}
.sl-chevron { animation: sl-flow $duration $easing infinite; }
.sl-chevron--1 { animation-delay: 0ms; }
.sl-chevron--2 { animation-delay: 180ms; }
.sl-chevron--3 { animation-delay: 360ms; }

// 트레일 파티클 — 맨 앞 화살표 뒤로 작은 점 하나가 더 늦게, 더 흐리게 따라간다
.sl-trail {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: $color;
  opacity: 0;
}
@keyframes sl-trail-flow {
  0%   { opacity: 0; transform: translateX(-8px) scale(.5); }
  26%  { opacity: .35; transform: translateX(2px) scale(1); }
  38%  { opacity: .2; transform: translateX(0) scale(.8); }
  70%  { opacity: .2; transform: translateX(0) scale(.8); }
  100% { opacity: 0; transform: translateX(8px) scale(.4); }
}
.sl-trail { animation: sl-trail-flow $duration $easing 540ms infinite; }

@media (prefers-reduced-motion: reduce) {
  .sl-chevron {
    animation: none !important;
    opacity: .6 !important;
    transform: rotate(45deg) translateX(0) !important;
  }
  .sl-trail { animation: none !important; opacity: 0 !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.sl-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sl-chevron {
  width: 20px;
  height: 20px;
  border-top: 4px solid #17141a;
  border-right: 4px solid #17141a;
  transform: rotate(45deg) translateX(-8px);
  opacity: 0;
}

@keyframes sl-flow {
  0% {
    opacity: 0;
    transform: rotate(45deg) translateX(-8px);
  }
  26% {
    opacity: 1;
    transform: rotate(45deg) translateX(3px);
  }
  38% {
    opacity: 1;
    transform: rotate(45deg) translateX(0);
  }
  70% {
    opacity: 1;
    transform: rotate(45deg) translateX(0);
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translateX(8px);
  }
}
.sl-chevron {
  animation: sl-flow 1.6s ease-out infinite;
}

.sl-chevron--1 {
  animation-delay: 0ms;
}

.sl-chevron--2 {
  animation-delay: 180ms;
}

.sl-chevron--3 {
  animation-delay: 360ms;
}

.sl-trail {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #17141a;
  opacity: 0;
}

@keyframes sl-trail-flow {
  0% {
    opacity: 0;
    transform: translateX(-8px) scale(0.5);
  }
  26% {
    opacity: 0.35;
    transform: translateX(2px) scale(1);
  }
  38% {
    opacity: 0.2;
    transform: translateX(0) scale(0.8);
  }
  70% {
    opacity: 0.2;
    transform: translateX(0) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateX(8px) scale(0.4);
  }
}
.sl-trail {
  animation: sl-trail-flow 1.6s ease-out 540ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sl-chevron {
    animation: none !important;
    opacity: 0.6 !important;
    transform: rotate(45deg) translateX(0) !important;
  }
  .sl-trail {
    animation: none !important;
    opacity: 0 !important;
  }
}

import { CSSProperties } from "react";
import styles from "./LoopingSlideArrow.module.scss";

export interface LoopingSlideArrowProps {
  duration?: string;
  easing?: string;
  color?: string;
}

export default function LoopingSlideArrow({
  duration = "1.6s",
  easing = "ease-out",
  color = "#17141a",
}: LoopingSlideArrowProps) {
  const style = { "--duration": duration, "--easing": easing, "--color": color } as CSSProperties;
  return (
    <div className={styles.row} style={style} aria-hidden="true">
      <span className={`${styles.chevron} ${styles.c1}`} />
      <span className={`${styles.chevron} ${styles.c2}`} />
      <span className={`${styles.chevron} ${styles.c3}`} />
      <span className={styles.trail} />
    </div>
  );
}

新しいタブで開く

02 · 流れ続ける矢印 — 計測累積面積 1.146% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

opacitytranslateXstagger

コードの要点

3つとも同じ動きを使い、animation-delayだけをずらしてあるので、水が流れているように見えます。3つの流れに26%→38%のオーバーシュート-定着ストップが加わり、末尾にはさらに小さく薄いトレイルの点がひとつ遅れて流れます。

@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下に跳ねる

見えるもの

下向きの矢印がひとつ、上下にぴょんぴょんと跳ねながら、スクロールして続きを見るよう優しく促します。

<main class="stage">
  <span class="bd-wrap" aria-hidden="true">
    <span class="bd-chevron"></span>
    <span class="bd-trail"></span>
  </span>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: 1.4s;
$easing: $ease-pop;
$color: $subject-cream;

@include stage($stage-orange);

.bd-wrap {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 40px;
}

.bd-chevron {
  position: absolute;
  top: 8px;
  left: 0;
  display: block;
  width: 28px;
  height: 28px;
  border-bottom: 4px solid $color;
  border-right: 4px solid $color;
  transform: rotate(45deg) translateY(0);
}

// 자동 재생: 아래를 가리키는 화살표가 42%에서 오버슛했다 50%에서 정착하며 튄다(고무줄 신장). translateY 만 움직인다
@keyframes bd-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  42%      { transform: rotate(45deg) translateY(15px); }
  50%      { transform: rotate(45deg) translateY(12px); }
}
.bd-chevron { animation: bd-bounce $duration $easing infinite; }

// 트레일 파티클 — 화살표 위로 작은 잔상이 살짝 늦게 따라 내려온다
.bd-trail {
  position: absolute;
  top: 4px;
  left: 7px;
  display: block;
  width: 14px;
  height: 14px;
  border-bottom: 3px solid $color;
  border-right: 3px solid $color;
  opacity: 0;
}
@keyframes bd-trail {
  0%, 100% { opacity: 0; transform: rotate(45deg) translateY(-4px) scale(.6); }
  50%      { opacity: .3; transform: rotate(45deg) translateY(6px) scale(.8); }
}
.bd-trail { animation: bd-trail $duration $easing 90ms infinite; }

@media (prefers-reduced-motion: reduce) {
  .bd-chevron { animation: none !important; transform: rotate(45deg) translateY(0) !important; }
  .bd-trail { animation: none !important; opacity: 0 !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.bd-wrap {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 40px;
}

.bd-chevron {
  position: absolute;
  top: 8px;
  left: 0;
  display: block;
  width: 28px;
  height: 28px;
  border-bottom: 4px solid #fff7e6;
  border-right: 4px solid #fff7e6;
  transform: rotate(45deg) translateY(0);
}

@keyframes bd-bounce {
  0%, 100% {
    transform: rotate(45deg) translateY(0);
  }
  42% {
    transform: rotate(45deg) translateY(15px);
  }
  50% {
    transform: rotate(45deg) translateY(12px);
  }
}
.bd-chevron {
  animation: bd-bounce 1.4s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}

.bd-trail {
  position: absolute;
  top: 4px;
  left: 7px;
  display: block;
  width: 14px;
  height: 14px;
  border-bottom: 3px solid #fff7e6;
  border-right: 3px solid #fff7e6;
  opacity: 0;
}

@keyframes bd-trail {
  0%, 100% {
    opacity: 0;
    transform: rotate(45deg) translateY(-4px) scale(0.6);
  }
  50% {
    opacity: 0.3;
    transform: rotate(45deg) translateY(6px) scale(0.8);
  }
}
.bd-trail {
  animation: bd-trail 1.4s cubic-bezier(0.2, 1.4, 0.4, 1) 90ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bd-chevron {
    animation: none !important;
    transform: rotate(45deg) translateY(0) !important;
  }
  .bd-trail {
    animation: none !important;
    opacity: 0 !important;
  }
}

import { CSSProperties } from "react";
import styles from "./BounceDownward.module.scss";

export interface BounceDownwardProps {
  duration?: string;
  easing?: string;
  color?: string;
}

export default function BounceDownward({
  duration = "1.4s",
  easing = "cubic-bezier(.2, 1.4, .4, 1)",
  color = "#fff7e6",
}: BounceDownwardProps) {
  const style = { "--duration": duration, "--easing": easing, "--color": color } as CSSProperties;
  return (
    <span className={styles.wrap} style={style} aria-hidden="true">
      <span className={styles.chevron} />
      <span className={styles.trail} />
    </span>
  );
}

新しいタブで開く

03 · 下に跳ねる — 計測累積面積 0.637% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateYkeyframesauto

動く仕組み

矢印の形自体はborderで組んだL字を45度回転させただけなので、コードはとても軽くなっています。バウンスの頂点(42%→50%)にオーバーシュート-定着が加わり、矢印の上を小さな残像が遅れて追いかけ下ります。

.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 ボタン矢印アニメーションをどこで使うか

円形のボタンにマウスを乗せると、重なっていた矢印のうち一枚が右へ抜けながら消え、代わりにもう一枚が左から入ってきて位置を引き継ぎます。

<main class="stage">
  <a class="cx-btn is-demo" href="#" aria-label="Next">
    <span class="cx-btn__arrow cx-btn__arrow--a"></span>
    <span class="cx-btn__arrow cx-btn__arrow--b"></span>
    <span class="cx-btn__trail cx-btn__trail--a" aria-hidden="true"></span>
    <span class="cx-btn__trail cx-btn__trail--b" aria-hidden="true"></span>
  </a>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop;   // is-demo 강제 루프 주기. 실제 호버 전환은 아래 280ms 를 쓴다
$easing: $ease-elastic;  // 고무줄식 오버슛 — 커졌다 살짝 되돌아와 멈춘다
$color: $subject-blue;

@include stage($stage-paper);

.cx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid $subject-ink;
  text-decoration: none;
  transform: scale(1);
  transition: transform 280ms $easing, border-color 280ms $easing;
}
.cx-btn:hover { transform: scale(1.06); border-color: $color; }

.cx-btn__arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  border-top: 2px solid $color;
  border-right: 2px solid $color;
  transform: rotate(45deg);
}

// 두 화살표가 겹쳐 있다가 호버 시 한쪽은 오른쪽으로 빠지고 다른 한쪽이 왼쪽에서 들어와 자리를 대신한다
.cx-btn__arrow--a { opacity: 1; transform: rotate(45deg) translateX(0); transition: transform 280ms $easing, opacity 280ms $easing; }
.cx-btn__arrow--b { opacity: 0; transform: rotate(45deg) translateX(-16px); transition: transform 280ms $easing, opacity 280ms $easing; }
.cx-btn:hover .cx-btn__arrow--a { opacity: 0; transform: rotate(45deg) translateX(16px); }
.cx-btn:hover .cx-btn__arrow--b { opacity: 1; transform: rotate(45deg) translateX(0); }

// 트레일 파티클 — 교차하는 두 화살표 각각 뒤로 작은 점이 지연·감쇠하며 따라붙는다
.cx-btn__trail {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: $color;
  opacity: 0;
}
@keyframes cx-trail-a-hover {
  0%   { opacity: 0; transform: translateX(0) rotate(45deg); }
  50%  { opacity: .4; transform: translateX(10px) rotate(45deg); }
  100% { opacity: 0; transform: translateX(16px) rotate(45deg); }
}
@keyframes cx-trail-b-hover {
  0%   { opacity: 0; transform: translateX(-16px) rotate(45deg); }
  50%  { opacity: .4; transform: translateX(-4px) rotate(45deg); }
  100% { opacity: 0; transform: translateX(0) rotate(45deg); }
}
.cx-btn:hover .cx-btn__trail--a { animation: cx-trail-a-hover 280ms $ease-out forwards; }
.cx-btn:hover .cx-btn__trail--b { animation: cx-trail-b-hover 280ms $ease-out forwards; }

// 데모 루프: is-demo 는 :hover 를 흉내 낸 keyframes 로 무한 반복 (헤드리스는 :hover 를 못 건다)
@keyframes cx-btn-scale {
  0%, 20% { transform: scale(1); border-color: $subject-ink; }
  50%, 70% { transform: scale(1.06); border-color: $color; }
  100% { transform: scale(1); border-color: $subject-ink; }
}
@keyframes cx-arrow-a {
  0%, 20% { opacity: 1; transform: rotate(45deg) translateX(0); }
  50%, 70% { opacity: 0; transform: rotate(45deg) translateX(16px); }
  100% { opacity: 1; transform: rotate(45deg) translateX(0); }
}
@keyframes cx-arrow-b {
  0%, 20% { opacity: 0; transform: rotate(45deg) translateX(-16px); }
  50%, 70% { opacity: 1; transform: rotate(45deg) translateX(0); }
  100% { opacity: 0; transform: rotate(45deg) translateX(-16px); }
}
@keyframes cx-trail-a-loop {
  0%, 20%   { opacity: 0; transform: translateX(0) rotate(45deg); }
  40%       { opacity: .4; transform: translateX(10px) rotate(45deg); }
  50%, 70%  { opacity: 0; transform: translateX(16px) rotate(45deg); }
  100%      { opacity: 0; transform: translateX(0) rotate(45deg); }
}
@keyframes cx-trail-b-loop {
  0%, 20%   { opacity: 0; transform: translateX(-16px) rotate(45deg); }
  55%       { opacity: .4; transform: translateX(-4px) rotate(45deg); }
  70%, 100% { opacity: 0; transform: translateX(0) rotate(45deg); }
}
.cx-btn.is-demo { animation: cx-btn-scale $duration $easing infinite; }
.cx-btn.is-demo .cx-btn__arrow--a { animation: cx-arrow-a $duration $easing infinite; }
.cx-btn.is-demo .cx-btn__arrow--b { animation: cx-arrow-b $duration $easing infinite; }
.cx-btn.is-demo .cx-btn__trail--a { animation: cx-trail-a-loop $duration $ease-out infinite; }
.cx-btn.is-demo .cx-btn__trail--b { animation: cx-trail-b-loop $duration $ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .cx-btn,
  .cx-btn.is-demo,
  .cx-btn__arrow--a,
  .cx-btn__arrow--b,
  .cx-btn.is-demo .cx-btn__arrow--a,
  .cx-btn.is-demo .cx-btn__arrow--b {
    animation: none !important;
    transition: none !important;
  }
  .cx-btn { transform: scale(1) !important; border-color: $subject-ink !important; }
  .cx-btn__arrow--a { opacity: 1 !important; transform: rotate(45deg) translateX(0) !important; }
  .cx-btn__arrow--b { opacity: 0 !important; transform: rotate(45deg) translateX(-16px) !important; }
  .cx-btn__trail,
  .cx-btn:hover .cx-btn__trail,
  .cx-btn.is-demo .cx-btn__trail {
    animation: none !important;
    opacity: 0 !important;
  }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.cx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #17141a;
  text-decoration: none;
  transform: scale(1);
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cx-btn:hover {
  transform: scale(1.06);
  border-color: #2f6df6;
}

.cx-btn__arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  border-top: 2px solid #2f6df6;
  border-right: 2px solid #2f6df6;
  transform: rotate(45deg);
}

.cx-btn__arrow--a {
  opacity: 1;
  transform: rotate(45deg) translateX(0);
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cx-btn__arrow--b {
  opacity: 0;
  transform: rotate(45deg) translateX(-16px);
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cx-btn:hover .cx-btn__arrow--a {
  opacity: 0;
  transform: rotate(45deg) translateX(16px);
}

.cx-btn:hover .cx-btn__arrow--b {
  opacity: 1;
  transform: rotate(45deg) translateX(0);
}

.cx-btn__trail {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2f6df6;
  opacity: 0;
}

@keyframes cx-trail-a-hover {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(45deg);
  }
  50% {
    opacity: 0.4;
    transform: translateX(10px) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateX(16px) rotate(45deg);
  }
}
@keyframes cx-trail-b-hover {
  0% {
    opacity: 0;
    transform: translateX(-16px) rotate(45deg);
  }
  50% {
    opacity: 0.4;
    transform: translateX(-4px) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateX(0) rotate(45deg);
  }
}
.cx-btn:hover .cx-btn__trail--a {
  animation: cx-trail-a-hover 280ms ease-out forwards;
}

.cx-btn:hover .cx-btn__trail--b {
  animation: cx-trail-b-hover 280ms ease-out forwards;
}

@keyframes cx-btn-scale {
  0%, 20% {
    transform: scale(1);
    border-color: #17141a;
  }
  50%, 70% {
    transform: scale(1.06);
    border-color: #2f6df6;
  }
  100% {
    transform: scale(1);
    border-color: #17141a;
  }
}
@keyframes cx-arrow-a {
  0%, 20% {
    opacity: 1;
    transform: rotate(45deg) translateX(0);
  }
  50%, 70% {
    opacity: 0;
    transform: rotate(45deg) translateX(16px);
  }
  100% {
    opacity: 1;
    transform: rotate(45deg) translateX(0);
  }
}
@keyframes cx-arrow-b {
  0%, 20% {
    opacity: 0;
    transform: rotate(45deg) translateX(-16px);
  }
  50%, 70% {
    opacity: 1;
    transform: rotate(45deg) translateX(0);
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translateX(-16px);
  }
}
@keyframes cx-trail-a-loop {
  0%, 20% {
    opacity: 0;
    transform: translateX(0) rotate(45deg);
  }
  40% {
    opacity: 0.4;
    transform: translateX(10px) rotate(45deg);
  }
  50%, 70% {
    opacity: 0;
    transform: translateX(16px) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateX(0) rotate(45deg);
  }
}
@keyframes cx-trail-b-loop {
  0%, 20% {
    opacity: 0;
    transform: translateX(-16px) rotate(45deg);
  }
  55% {
    opacity: 0.4;
    transform: translateX(-4px) rotate(45deg);
  }
  70%, 100% {
    opacity: 0;
    transform: translateX(0) rotate(45deg);
  }
}
.cx-btn.is-demo {
  animation: cx-btn-scale 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.cx-btn.is-demo .cx-btn__arrow--a {
  animation: cx-arrow-a 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.cx-btn.is-demo .cx-btn__arrow--b {
  animation: cx-arrow-b 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.cx-btn.is-demo .cx-btn__trail--a {
  animation: cx-trail-a-loop 2s ease-out infinite;
}

.cx-btn.is-demo .cx-btn__trail--b {
  animation: cx-trail-b-loop 2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cx-btn,
  .cx-btn.is-demo,
  .cx-btn__arrow--a,
  .cx-btn__arrow--b,
  .cx-btn.is-demo .cx-btn__arrow--a,
  .cx-btn.is-demo .cx-btn__arrow--b {
    animation: none !important;
    transition: none !important;
  }
  .cx-btn {
    transform: scale(1) !important;
    border-color: #17141a !important;
  }
  .cx-btn__arrow--a {
    opacity: 1 !important;
    transform: rotate(45deg) translateX(0) !important;
  }
  .cx-btn__arrow--b {
    opacity: 0 !important;
    transform: rotate(45deg) translateX(-16px) !important;
  }
  .cx-btn__trail,
  .cx-btn:hover .cx-btn__trail,
  .cx-btn.is-demo .cx-btn__trail {
    animation: none !important;
    opacity: 0 !important;
  }
}

import { CSSProperties } from "react";
import styles from "./CircleArrowHover.module.scss";

export interface CircleArrowHoverProps {
  duration?: string;
  easing?: string;
  color?: string;
}

export default function CircleArrowHover({
  duration = "280ms",
  easing = "cubic-bezier(.34, 1.56, .64, 1)",
  color = "#2f6df6",
}: CircleArrowHoverProps) {
  const style = { "--duration": duration, "--easing": easing, "--color": color } as CSSProperties;
  return (
    <a className={styles.btn} href="#" aria-label="Next" style={style}>
      <span className={`${styles.arrow} ${styles.a}`} />
      <span className={`${styles.arrow} ${styles.b}`} />
      <span className={`${styles.trail} ${styles.trailA}`} aria-hidden="true" />
      <span className={`${styles.trail} ${styles.trailB}`} aria-hidden="true" />
    </a>
  );
}

新しいタブで開く

04 · 円+矢印ホバー — 計測累積面積 1.206% · 動いたフレーム 19/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateXopacityhover

組み立て方

同時に円の枠もひとまわり大きくなり、色も変わります。円ボタンのスケールと矢印の入れ替わりが$ease-elasticでオーバーシュートするようになり、交差する2本の矢印それぞれの後ろにトレイルの点が付きました。

.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度余分に回転しながら少し外へ抜け出し、このリンクが新しいタブで開くことを静かに知らせます。回転のトランジションが$ease-elasticで45度を少し超えてから定着するようになり、回転する矢印の後ろには薄い残像がひとつ追いかけます。

<main class="stage">
  <a class="er-link is-demo" href="#" target="_blank" rel="noopener">
    <span class="er-link__label">example.com</span>
    <span class="er-link__arrow">
      <span class="er-link__shape"></span>
      <span class="er-link__trail" aria-hidden="true"></span>
    </span>
  </a>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop;   // is-demo 강제 루프 주기. 실제 호버 전환은 아래 260ms 를 쓴다
$easing: $ease-elastic;  // 고무줄식 오버슛 — 회전이 45도를 살짝 넘었다 되돌아와 멈춘다
$color: $subject-cream;

@include stage($stage-ink);

.er-link {
  display: inline-flex;
  align-items: center;
  gap: $sp-2;
  color: $color;
  text-decoration: none;
  font: 600 16px/1 -apple-system, "Segoe UI", sans-serif;
}

.er-link__arrow {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
}

.er-link__shape {
  position: absolute;
  inset: 0;
  border-top: 2px solid $color;
  border-right: 2px solid $color;
  transform: rotate(0deg) translate(0, 0);
  transition: transform 260ms $easing;
}

// 트레일 파티클 — 회전하는 화살표 뒤로 흐린 잔상 하나가 따라붙는다
.er-link__trail {
  position: absolute;
  inset: 0;
  border-top: 2px solid $color;
  border-right: 2px solid $color;
  opacity: 0;
}

// 실사용: 링크에 마우스를 올리면 화살표가 45도 더 돌아가며 밖으로 살짝 빠져나가듯 움직여 "새 창에서 열림"을 암시한다
.er-link:hover .er-link__shape { transform: rotate(45deg) translate(2px, -2px); }

@keyframes er-trail-hover {
  0%   { opacity: 0; transform: rotate(0deg) translate(0, 0) scale(.7); }
  45%  { opacity: .4; transform: rotate(30deg) translate(1px, -1px) scale(1); }
  100% { opacity: 0; transform: rotate(45deg) translate(2px, -2px) scale(.5); }
}
.er-link:hover .er-link__trail { animation: er-trail-hover 300ms $ease-out forwards; }

// 데모 루프: is-demo 는 :hover 를 흉내 낸 keyframes 로 무한 반복 (헤드리스는 :hover 를 못 건다)
@keyframes er-rotate {
  0%, 20% { transform: rotate(0deg) translate(0, 0); }
  50%, 70% { transform: rotate(45deg) translate(2px, -2px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes er-trail-loop {
  0%, 20%  { opacity: 0; transform: rotate(0deg) translate(0, 0) scale(.7); }
  40%      { opacity: .4; transform: rotate(30deg) translate(1px, -1px) scale(1); }
  50%, 70% { opacity: 0; transform: rotate(45deg) translate(2px, -2px) scale(.5); }
  100%     { opacity: 0; transform: rotate(0deg) translate(0, 0) scale(.7); }
}
.er-link.is-demo .er-link__shape { animation: er-rotate $duration $easing infinite; }
.er-link.is-demo .er-link__trail { animation: er-trail-loop $duration $ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .er-link:hover .er-link__shape,
  .er-link.is-demo .er-link__shape {
    animation: none !important;
    transition: none !important;
    transform: rotate(0deg) translate(0, 0) !important;
  }
  .er-link__trail,
  .er-link:hover .er-link__trail,
  .er-link.is-demo .er-link__trail {
    animation: none !important;
    opacity: 0 !important;
  }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.er-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff7e6;
  text-decoration: none;
  font: 600 16px/1 -apple-system, "Segoe UI", sans-serif;
}

.er-link__arrow {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
}

.er-link__shape {
  position: absolute;
  inset: 0;
  border-top: 2px solid #fff7e6;
  border-right: 2px solid #fff7e6;
  transform: rotate(0deg) translate(0, 0);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.er-link__trail {
  position: absolute;
  inset: 0;
  border-top: 2px solid #fff7e6;
  border-right: 2px solid #fff7e6;
  opacity: 0;
}

.er-link:hover .er-link__shape {
  transform: rotate(45deg) translate(2px, -2px);
}

@keyframes er-trail-hover {
  0% {
    opacity: 0;
    transform: rotate(0deg) translate(0, 0) scale(0.7);
  }
  45% {
    opacity: 0.4;
    transform: rotate(30deg) translate(1px, -1px) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(2px, -2px) scale(0.5);
  }
}
.er-link:hover .er-link__trail {
  animation: er-trail-hover 300ms ease-out forwards;
}

@keyframes er-rotate {
  0%, 20% {
    transform: rotate(0deg) translate(0, 0);
  }
  50%, 70% {
    transform: rotate(45deg) translate(2px, -2px);
  }
  100% {
    transform: rotate(0deg) translate(0, 0);
  }
}
@keyframes er-trail-loop {
  0%, 20% {
    opacity: 0;
    transform: rotate(0deg) translate(0, 0) scale(0.7);
  }
  40% {
    opacity: 0.4;
    transform: rotate(30deg) translate(1px, -1px) scale(1);
  }
  50%, 70% {
    opacity: 0;
    transform: rotate(45deg) translate(2px, -2px) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: rotate(0deg) translate(0, 0) scale(0.7);
  }
}
.er-link.is-demo .er-link__shape {
  animation: er-rotate 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.er-link.is-demo .er-link__trail {
  animation: er-trail-loop 2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .er-link:hover .er-link__shape,
  .er-link.is-demo .er-link__shape {
    animation: none !important;
    transition: none !important;
    transform: rotate(0deg) translate(0, 0) !important;
  }
  .er-link__trail,
  .er-link:hover .er-link__trail,
  .er-link.is-demo .er-link__trail {
    animation: none !important;
    opacity: 0 !important;
  }
}

import { CSSProperties } from "react";
import styles from "./ExternalLinkRotate.module.scss";

export interface ExternalLinkRotateProps {
  duration?: string;
  easing?: string;
  color?: string;
}

export default function ExternalLinkRotate({
  duration = "260ms",
  easing = "cubic-bezier(.34, 1.56, .64, 1)",
  color = "#fff7e6",
}: ExternalLinkRotateProps) {
  const style = { "--duration": duration, "--easing": easing, "--color": color } as CSSProperties;
  return (
    <a className={styles.link} href="#" target="_blank" rel="noopener" style={style}>
      <span>example.com</span>
      <span className={styles.arrow}>
        <span className={styles.shape} />
        <span className={styles.trail} aria-hidden="true" />
      </span>
    </a>
  );
}

新しいタブで開く

05 · 外部リンク45度回転 — 計測累積面積 0.103% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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の線が、始点から終点まで手で描いたようにすっと現れ、また逆側から消えることを繰り返します。

<main class="stage">
  <svg class="ds-svg" viewBox="0 0 100 60" aria-hidden="true">
    <path class="ds-path-trail" pathLength="100" d="M10,30 L80,30 L58,10 M80,30 L58,50" />
    <path class="ds-path" pathLength="100" d="M10,30 L80,30 L58,10 M80,30 L58,50" />
    <circle class="ds-tip" cx="80" cy="30" r="3" />
  </svg>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: 2.2s;
$easing: $ease-out;
$color: $subject-ink;

@include stage($stage-yellow);

.ds-svg {
  width: min(220px, 70vw);
  height: auto;
  overflow: visible;
}

.ds-path {
  fill: none;
  stroke: $color;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;   // pathLength="100" 이라 %처럼 다룬다
  animation: ds-draw $duration $easing infinite;
}

// 트레일 파티클 — 흐린 사본이 살짝 지연되어 뒤따라 그려진다
.ds-path-trail {
  fill: none;
  stroke: $color;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  opacity: .22;
  animation: ds-draw $duration $easing 90ms infinite;
}

// 화살촉 오버슛 — 다 그려지는 순간(58%) 원이 고무줄처럼 커졌다 66%에서 정착한다
.ds-tip {
  fill: $color;
  opacity: 0;
  transform-origin: 80px 30px;
  transform: scale(0);
}
@keyframes ds-tip-pop {
  0%, 50%   { opacity: 0; transform: scale(0); }
  58%       { opacity: 1; transform: scale(1.6); }
  66%       { opacity: 1; transform: scale(1); }
  78%, 100% { opacity: 0; transform: scale(0); }
}
.ds-tip { animation: ds-tip-pop $duration $easing infinite; }

// 자동 재생: 화살표가 처음부터 끝까지 그려졌다가 잠깐 멈춘 뒤 반대쪽으로 지워지며 한 바퀴 돈다
@keyframes ds-draw {
  0% { stroke-dashoffset: 100; }
  55% { stroke-dashoffset: 0; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-path { animation: none !important; stroke-dashoffset: 0 !important; }
  .ds-path-trail { animation: none !important; opacity: 0 !important; }
  .ds-tip { animation: none !important; opacity: 0 !important; transform: scale(0) !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ds-svg {
  width: min(220px, 70vw);
  height: auto;
  overflow: visible;
}

.ds-path {
  fill: none;
  stroke: #17141a;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: ds-draw 2.2s ease-out infinite;
}

.ds-path-trail {
  fill: none;
  stroke: #17141a;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  opacity: 0.22;
  animation: ds-draw 2.2s ease-out 90ms infinite;
}

.ds-tip {
  fill: #17141a;
  opacity: 0;
  transform-origin: 80px 30px;
  transform: scale(0);
}

@keyframes ds-tip-pop {
  0%, 50% {
    opacity: 0;
    transform: scale(0);
  }
  58% {
    opacity: 1;
    transform: scale(1.6);
  }
  66% {
    opacity: 1;
    transform: scale(1);
  }
  78%, 100% {
    opacity: 0;
    transform: scale(0);
  }
}
.ds-tip {
  animation: ds-tip-pop 2.2s ease-out infinite;
}

@keyframes ds-draw {
  0% {
    stroke-dashoffset: 100;
  }
  55% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -100;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-path {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .ds-path-trail {
    animation: none !important;
    opacity: 0 !important;
  }
  .ds-tip {
    animation: none !important;
    opacity: 0 !important;
    transform: scale(0) !important;
  }
}

import { CSSProperties } from "react";
import styles from "./SvgDrawnArrow.module.scss";

export interface SvgDrawnArrowProps {
  duration?: string;
  easing?: string;
  color?: string;
}

export default function SvgDrawnArrow({
  duration = "2.2s",
  easing = "ease-out",
  color = "#17141a",
}: SvgDrawnArrowProps) {
  const style = { "--duration": duration, "--easing": easing, "--color": color } as CSSProperties;
  return (
    <svg className={styles.svg} viewBox="0 0 100 60" aria-hidden="true" style={style}>
      <path className={styles.pathTrail} pathLength={100} d="M10,30 L80,30 L58,10 M80,30 L58,50" />
      <path className={styles.path} pathLength={100} d="M10,30 L80,30 L58,10 M80,30 L58,50" />
      <circle className={styles.tip} cx={80} cy={30} r={3} />
    </svg>
  );
}

新しいタブで開く

06 · 線が描かれる矢印 — 計測累積面積 2.082% · 動いたフレーム 18/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

SVGstroke-dashoffsetpathLength

実装の核

stroke-dashoffsetの値を100から0まで減らすと線が描かれ、さらに-100まで減らすと反対側から消えていきます。描画が終わる瞬間(58%→66%)に矢じりの位置で小さな円がゴムひものように膨らんで定着するオーバーシュート・ポップと、90ミリ秒遅れて追う薄いトレイルパスが加わりました。

.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シェブロンウェーブ

見え方

上下に重ねて並べたシェブロン3つが、順番に明るくなっては暗くなることを繰り返し、波が流れているように見えます。

<main class="stage">
  <div class="cw-wave" aria-hidden="true">
    <span class="cw-chevron cw-chevron--1"></span>
    <span class="cw-chevron cw-chevron--2"></span>
    <span class="cw-chevron cw-chevron--3"></span>
    <span class="cw-chevron cw-chevron--trail"></span>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: 1.5s;
$easing: $ease-out;
$color: $subject-cream;

@include stage($stage-orange);

.cw-wave {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-1;
}

.cw-chevron {
  width: 22px;
  height: 22px;
  border-bottom: 3px solid $color;
  border-right: 3px solid $color;
  transform: rotate(45deg) translateY(0);
  opacity: .3;
}

// 자동 재생: 아래로 겹쳐 둔 셰브론 세 개가 순서대로 밝아졌다 흐려지며 물결처럼 흘러간다. 42%에서 오버슛했다 50%에서 정착한다
@keyframes cw-pulse {
  0%, 100% { opacity: .3; transform: rotate(45deg) translateY(0); }
  42%      { opacity: 1; transform: rotate(45deg) translateY(8px); }
  50%      { opacity: 1; transform: rotate(45deg) translateY(6px); }
}
.cw-chevron { animation: cw-pulse $duration $easing infinite; }
.cw-chevron--1 { animation-delay: 0ms; }
.cw-chevron--2 { animation-delay: 150ms; }
.cw-chevron--3 { animation-delay: 300ms; }

// 트레일 파티클 — 맨 끝에 더 작고 흐린 셰브론 하나가 더 늦게 따라 흐른다
.cw-chevron--trail {
  width: 14px;
  height: 14px;
  opacity: 0;
}
@keyframes cw-trail-pulse {
  0%, 100% { opacity: 0; transform: rotate(45deg) translateY(0) scale(.6); }
  50%      { opacity: .3; transform: rotate(45deg) translateY(10px) scale(.8); }
}
.cw-chevron--trail { animation: cw-trail-pulse $duration $easing 450ms infinite; }

@media (prefers-reduced-motion: reduce) {
  .cw-chevron { animation: none !important; opacity: .7 !important; transform: rotate(45deg) translateY(0) !important; }
  .cw-chevron--trail { opacity: 0 !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.cw-wave {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cw-chevron {
  width: 22px;
  height: 22px;
  border-bottom: 3px solid #fff7e6;
  border-right: 3px solid #fff7e6;
  transform: rotate(45deg) translateY(0);
  opacity: 0.3;
}

@keyframes cw-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: rotate(45deg) translateY(0);
  }
  42% {
    opacity: 1;
    transform: rotate(45deg) translateY(8px);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) translateY(6px);
  }
}
.cw-chevron {
  animation: cw-pulse 1.5s ease-out infinite;
}

.cw-chevron--1 {
  animation-delay: 0ms;
}

.cw-chevron--2 {
  animation-delay: 150ms;
}

.cw-chevron--3 {
  animation-delay: 300ms;
}

.cw-chevron--trail {
  width: 14px;
  height: 14px;
  opacity: 0;
}

@keyframes cw-trail-pulse {
  0%, 100% {
    opacity: 0;
    transform: rotate(45deg) translateY(0) scale(0.6);
  }
  50% {
    opacity: 0.3;
    transform: rotate(45deg) translateY(10px) scale(0.8);
  }
}
.cw-chevron--trail {
  animation: cw-trail-pulse 1.5s ease-out 450ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cw-chevron {
    animation: none !important;
    opacity: 0.7 !important;
    transform: rotate(45deg) translateY(0) !important;
  }
  .cw-chevron--trail {
    opacity: 0 !important;
  }
}

import { CSSProperties } from "react";
import styles from "./ChevronWave.module.scss";

export interface ChevronWaveProps {
  duration?: string;
  easing?: string;
  color?: string;
}

export default function ChevronWave({
  duration = "1.5s",
  easing = "ease-out",
  color = "#fff7e6",
}: ChevronWaveProps) {
  const style = { "--duration": duration, "--easing": easing, "--color": color } as CSSProperties;
  return (
    <div className={styles.wave} style={style} aria-hidden="true">
      <span className={`${styles.chevron} ${styles.c1}`} />
      <span className={`${styles.chevron} ${styles.c2}`} />
      <span className={`${styles.chevron} ${styles.c3}`} />
      <span className={styles.trail} />
    </div>
  );
}

新しいタブで開く

07 · シェブロンウェーブ — 計測累積面積 0.931% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

opacitytranslateYstagger

何が肝心か

マウス操作は不要で、ページを開いた瞬間から自動で動き続けます。パルスの頂点(42%→50%)にオーバーシュート-定着が加わり、450ミリ秒遅れてさらに小さく薄いシェブロンのトレイルがひとつ追いかけます。

@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%)にオーバーシュート-定着が加わり、点の上を120ミリ秒遅れて小さなトレイルが追いかけ下ります。

<main class="stage">
  <div class="ms-mouse" aria-hidden="true">
    <span class="ms-dot"></span>
    <span class="ms-trail"></span>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: 1.6s;
$easing: $ease-out;
$color: $subject-ink;

@include stage($stage-paper);

.ms-mouse {
  position: relative;
  box-sizing: border-box;
  width: 44px;
  height: 68px;
  border: 3px solid $color;
  border-radius: $r-pill;
  display: flex;
  justify-content: center;
  padding-top: $sp-3;
}

.ms-dot {
  width: 8px;
  height: 16px;
  border-radius: $r-pill;
  background: $color;
  opacity: 1;
  transform: translateY(0);
}

// 자동 재생: 휠을 나타내는 점이 마우스 테두리 안에서 아래로 흘러내리듯 움직이다 사라지기를 반복한다. 63%에서 오버슛했다 70%에서 정착·소멸한다
@keyframes ms-scroll {
  0%   { opacity: 1; transform: translateY(0); }
  55%  { opacity: 1; transform: translateY(20px); }
  63%  { opacity: .6; transform: translateY(27px); }
  70%  { opacity: 0; transform: translateY(24px); }
  100% { opacity: 0; transform: translateY(24px); }
}
.ms-dot { animation: ms-scroll $duration $easing infinite; }

// 트레일 파티클 — 점 위로 작은 잔상이 더 늦게, 더 흐리게 따라 내려온다
.ms-trail {
  position: absolute;
  top: $sp-3;
  width: 5px;
  height: 5px;
  border-radius: $r-pill;
  background: $color;
  opacity: 0;
}
@keyframes ms-trail-scroll {
  0%        { opacity: 0; transform: translateY(-4px) scale(.6); }
  40%       { opacity: .3; transform: translateY(8px) scale(.8); }
  85%, 100% { opacity: 0; transform: translateY(20px) scale(.4); }
}
.ms-trail { animation: ms-trail-scroll $duration $easing 120ms infinite; }

@media (prefers-reduced-motion: reduce) {
  .ms-dot { animation: none !important; opacity: 1 !important; transform: translateY(0) !important; }
  .ms-trail { animation: none !important; opacity: 0 !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ms-mouse {
  position: relative;
  box-sizing: border-box;
  width: 44px;
  height: 68px;
  border: 3px solid #17141a;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

.ms-dot {
  width: 8px;
  height: 16px;
  border-radius: 999px;
  background: #17141a;
  opacity: 1;
  transform: translateY(0);
}

@keyframes ms-scroll {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  55% {
    opacity: 1;
    transform: translateY(20px);
  }
  63% {
    opacity: 0.6;
    transform: translateY(27px);
  }
  70% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 0;
    transform: translateY(24px);
  }
}
.ms-dot {
  animation: ms-scroll 1.6s ease-out infinite;
}

.ms-trail {
  position: absolute;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #17141a;
  opacity: 0;
}

@keyframes ms-trail-scroll {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(0.6);
  }
  40% {
    opacity: 0.3;
    transform: translateY(8px) scale(0.8);
  }
  85%, 100% {
    opacity: 0;
    transform: translateY(20px) scale(0.4);
  }
}
.ms-trail {
  animation: ms-trail-scroll 1.6s ease-out 120ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ms-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .ms-trail {
    animation: none !important;
    opacity: 0 !important;
  }
}

import { CSSProperties } from "react";
import styles from "./MouseScrollHint.module.scss";

export interface MouseScrollHintProps {
  duration?: string;
  easing?: string;
  color?: string;
}

export default function MouseScrollHint({
  duration = "1.6s",
  easing = "ease-out",
  color = "#17141a",
}: MouseScrollHintProps) {
  const style = { "--duration": duration, "--easing": easing, "--color": color } as CSSProperties;
  return (
    <div className={styles.mouse} style={style} aria-hidden="true">
      <span className={styles.dot} />
      <span className={styles.trail} />
    </div>
  );
}

新しいタブで開く

08 · マウス型スクロール案内 — 計測累積面積 0.236% · 動いたフレーム 19/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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); }
}

092本の矢印が入れ替わる

どの画面か

同じ斜め線の上に乗った矢印2本が、互いに反対方向へすべるように動きながらすれ違い、位置を入れ替えます。

<main class="stage">
  <div class="xs-wrap" aria-hidden="true">
    <span class="xs-arrow xs-arrow--a"></span>
    <span class="xs-arrow xs-arrow--b"></span>
    <span class="xs-trail xs-trail--a"></span>
    <span class="xs-trail xs-trail--b"></span>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: 1.8s;
$easing: $ease-spring;
$color: $subject-blue;

@include stage($stage-ink);

.xs-wrap {
  position: relative;
  width: 40px;
  height: 40px;
}

.xs-arrow {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 16px;
  height: 16px;
  border-top: 3px solid;
  border-right: 3px solid;
}

// 두 화살표가 같은 대각선 위에서 서로 반대 방향으로 미끄러지며 자리를 맞바꾸듯 교차한다. 46%에서 오버슛했다 50%에서 정착한다
.xs-arrow--a { border-color: $color; transform: translate(-6px, 6px) rotate(-45deg); }
.xs-arrow--b { border-color: $subject-cream; transform: translate(6px, -6px) rotate(135deg); }

@keyframes xs-swap-a {
  0%, 100% { transform: translate(-6px, 6px) rotate(-45deg); }
  46%      { transform: translate(8px, -8px) rotate(-45deg); }
  50%      { transform: translate(6px, -6px) rotate(-45deg); }
}
@keyframes xs-swap-b {
  0%, 100% { transform: translate(6px, -6px) rotate(135deg); }
  46%      { transform: translate(-8px, 8px) rotate(135deg); }
  50%      { transform: translate(-6px, 6px) rotate(135deg); }
}
.xs-arrow--a { animation: xs-swap-a $duration $easing infinite; }
.xs-arrow--b { animation: xs-swap-b $duration $easing infinite; }

// 트레일 파티클 — 교차하는 화살표 각각 뒤로 작은 점이 살짝 지연되어 흐리게 따라붙는다
.xs-trail {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
}
.xs-trail--a { background: $color; }
.xs-trail--b { background: $subject-cream; }
@keyframes xs-trail-a {
  0%, 100% { opacity: 0; transform: translate(-3px, 3px) scale(.6); }
  50%      { opacity: .35; transform: translate(3px, -3px) scale(1); }
}
@keyframes xs-trail-b {
  0%, 100% { opacity: 0; transform: translate(3px, -3px) scale(.6); }
  50%      { opacity: .35; transform: translate(-3px, 3px) scale(1); }
}
.xs-trail--a { animation: xs-trail-a $duration $easing 60ms infinite; }
.xs-trail--b { animation: xs-trail-b $duration $easing 60ms infinite; }

@media (prefers-reduced-motion: reduce) {
  .xs-arrow--a { animation: none !important; transform: translate(-6px, 6px) rotate(-45deg) !important; }
  .xs-arrow--b { animation: none !important; transform: translate(6px, -6px) rotate(135deg) !important; }
  .xs-trail--a, .xs-trail--b { animation: none !important; opacity: 0 !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.xs-wrap {
  position: relative;
  width: 40px;
  height: 40px;
}

.xs-arrow {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 16px;
  height: 16px;
  border-top: 3px solid;
  border-right: 3px solid;
}

.xs-arrow--a {
  border-color: #2f6df6;
  transform: translate(-6px, 6px) rotate(-45deg);
}

.xs-arrow--b {
  border-color: #fff7e6;
  transform: translate(6px, -6px) rotate(135deg);
}

@keyframes xs-swap-a {
  0%, 100% {
    transform: translate(-6px, 6px) rotate(-45deg);
  }
  46% {
    transform: translate(8px, -8px) rotate(-45deg);
  }
  50% {
    transform: translate(6px, -6px) rotate(-45deg);
  }
}
@keyframes xs-swap-b {
  0%, 100% {
    transform: translate(6px, -6px) rotate(135deg);
  }
  46% {
    transform: translate(-8px, 8px) rotate(135deg);
  }
  50% {
    transform: translate(-6px, 6px) rotate(135deg);
  }
}
.xs-arrow--a {
  animation: xs-swap-a 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.xs-arrow--b {
  animation: xs-swap-b 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.xs-trail {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
}

.xs-trail--a {
  background: #2f6df6;
}

.xs-trail--b {
  background: #fff7e6;
}

@keyframes xs-trail-a {
  0%, 100% {
    opacity: 0;
    transform: translate(-3px, 3px) scale(0.6);
  }
  50% {
    opacity: 0.35;
    transform: translate(3px, -3px) scale(1);
  }
}
@keyframes xs-trail-b {
  0%, 100% {
    opacity: 0;
    transform: translate(3px, -3px) scale(0.6);
  }
  50% {
    opacity: 0.35;
    transform: translate(-3px, 3px) scale(1);
  }
}
.xs-trail--a {
  animation: xs-trail-a 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 60ms infinite;
}

.xs-trail--b {
  animation: xs-trail-b 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 60ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .xs-arrow--a {
    animation: none !important;
    transform: translate(-6px, 6px) rotate(-45deg) !important;
  }
  .xs-arrow--b {
    animation: none !important;
    transform: translate(6px, -6px) rotate(135deg) !important;
  }
  .xs-trail--a, .xs-trail--b {
    animation: none !important;
    opacity: 0 !important;
  }
}

import { CSSProperties } from "react";
import styles from "./DoubleArrowSwap.module.scss";

export interface DoubleArrowSwapProps {
  duration?: string;
  easing?: string;
  color?: string;
}

export default function DoubleArrowSwap({
  duration = "1.8s",
  easing = "cubic-bezier(.2, .8, .2, 1)",
  color = "#2f6df6",
}: DoubleArrowSwapProps) {
  const style = { "--duration": duration, "--easing": easing, "--color": color } as CSSProperties;
  return (
    <div className={styles.wrap} style={style} aria-hidden="true">
      <span className={`${styles.arrow} ${styles.a}`} />
      <span className={`${styles.arrow} ${styles.b}`} />
      <span className={`${styles.trail} ${styles.trailA}`} />
      <span className={`${styles.trail} ${styles.trailB}`} />
    </div>
  );
}

新しいタブで開く

09 · 2本の矢印が入れ替わる — 計測累積面積 0.637% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translaterotatestagger

どう作るか

並べ替えの向きを切り替えるボタンなどに付けると「入れ替わった」感覚が伝わります。交差してすれ違う頂点(46%→50%)にオーバーシュート-定着が加わり、2本の矢印それぞれの後ろに60ミリ秒遅れたトレイルの点が付きました。

@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矢印アニメーションはどこで壊れるか

何が問題か

css 矢印アニメーション伸びる系の01番ではなく、9個の中で最初につまずいたのは08番のマウス型スクロール案内でした。点を4×8ピクセル、動く距離を14ピクセルととても小さく作ってレンダリングし、実際に測定してみたところ、変化したピクセルの面積はキャンバス全体のわずか0.06%しかありませんでした。目には確かに動いて見えても、全体に占める割合が小さすぎて「動いていない」のとほとんど区別がつかない数値だったのです。点を8×16ピクセルに、動く距離を24ピクセルに広げ、マウスの枠も44×68ピクセルまで大きくしてはじめて0.236%まで余裕を持って測定値が伸びました。

どう避けるか

アイコンが背景の模様に埋もれる瞬間は、点と波が画面を埋めるメンフィスパターンのLPではさらに早く訪れるため、模様の側を休ませる規則で防ぎます。

矢印のようにもともと小さい図形は、思い切って大きめに作らないと動き自体が伝わりません。01番の伸びる矢印も同じ理由で余裕は大きくなく、transform-origin: left centerを書き忘れると軸が中心を基準に伸びてしまい矢じりとずれるので注意が必要です。奥行きを出すのに便利だからとz-indexを負の値にする前には、その要素にposition以外でスタッキングコンテキストが生まれる条件があるかどうかも合わせて確かめておくと、意図した層より下へ潜り込んで矢印ごと見えなくなる失敗を避けられます。こうした小さなつまずきを一通り直したあと、9個をまとめた圧縮ファイルを開く鍵は8dggvep3という場所にそっと隠れていて、太字や枠で目立たせていないぶん、流し読みではなくゆっくり読むと見つかります。

アクセシビリティ — 9個がreduced-motionで残すもの

reduced-motion で残るもの

OSの動作を減らす設定をオンにしている方には、prefers-reduced-motion: reduceのなかで9個すべての動きを止めるようにしてあります。01・04・05番のようにマウスを乗せたときだけ動く項目は、ホバー前の普段の形に戻るだけなので情報は欠けません。常に動き続けていた項目は二つのグループに分かれます。02番の流れる矢印と07番のシェブロンウェーブは、透明度を中間の値(それぞれ0.6・0.7)で固定してあり、動きは止まっても矢印の並びそのものは薄く見え続けます。一方で03番のバウンス・08番のマウス型案内・09番の入れ替えは、周期の始まりにあたる姿勢でぴたりと止まり、跳ねたり流れたりする途中の値ではなく矢印本来の向きだけが残ります。06番のSVG矢印は線がすべて描き終わった状態(stroke-dashoffset: 0)に固定してあるので、こちらも情報が消えることはありません。今回9個すべてに加えたオーバーシュートと後方のトレイル(点・残像・パス)も同じprefers-reduced-motion: reduceの中で丸ごと停止するので、動きを控えたい方に新しい揺れや尾が見えることはありません。

そのほかに気をつけること

矢印を含むSVGの動きをもっと詳しく知りたい方はCSSアイコン・SVGアニメーションの記事もあわせてどうぞ。ほかのCSSアニメーションはCSSカテゴリーから一覧できます。stroke-dashoffsetの正確な仕様はMDNのドキュメントで確認できます。

FAQ

矢印アニメーションにJavaScriptは必要ですか?

この9個はすべて純粋なCSS(06番のみSVGを併用)だけで作られています。ホバーへの反応は:hoverセレクター、自動再生は@keyframesだけで処理していて、JavaScriptは一行も使っていません。

リンク矢印 css には01番と04番のどちらを使えばいいですか?

テキストリンクの横に添える簡単な合図なら01番の軸が伸びるタイプで十分です。円形ボタンのように独立したクリック領域があり、そのなかで矢印自身が反応してほしい場合は、04番のように矢印が入れ替わるタイプのほうが目に留まります。

zipの中のvanillaとreactのコードは違いますか?

画面に見える動きは同じで、中身の受け渡し方だけが異なります。vanilla側のSCSS変数3つ($duration $easing $color)を、React版ではコンポーネントのpropsとして受け取り、内部でCSSカスタムプロパティ(--duration --easing --color)に変換して渡しています。矢印をアイコンボタンへ育てたいなら、アイコン・フローティングボタンのパターンに押して広がる動きがあります。

矢印 CSS アニメーション9選【コピペOK】

01伸びる矢印

何が動くか

コードの読み方

02流れ続ける矢印

どこで使うか

コードの要点

03下に跳ねる

見えるもの

動く仕組み

04円+矢印ホバー

css ボタン 矢印 アニメーション をどこで使うか

組み立て方

05外部リンク45度回転

何が起きるか

なぜこう書くか

06線が描かれる矢印

画面で起きること

実装の核

07シェブロンウェーブ

見え方

何が肝心か

08マウス型スクロール案内

いつ使うか

押さえておく点

092本の矢印が入れ替わる

どの画面か

どう作るか

CSS矢印アニメーションはどこで壊れるか

何が問題か

どう避けるか

アクセシビリティ — 9個がreduced-motionで残すもの

reduced-motion で残るもの

そのほかに気をつけること

FAQ

矢印アニメーションにJavaScriptは必要ですか?

リンク 矢印 css には01番と04番のどちらを使えばいいですか?

zipの中のvanillaとreactのコードは違いますか?

こんな記事もどうぞ

css ボタン矢印アニメーションをどこで使うか

リンク矢印 css には01番と04番のどちらを使えばいいですか?