矢印の抜け替え — 動きの伝え方辞典

hover

arrow slide-through / arrow loop hover / arrow icon hover

矢印の抜け替え

ホバーでボタンの矢印が指す方向へ飛び出し、反対側から戻ってくる演出。「押すとこの先へ進む」をアイコン自身の動きで言い切れる、CTAとページ送りの定番マイクロインタラクション。

01 — Demo video

Play live →

02 — Prompt template

ボタンの矢印アイコンに arrow slide-through(ホバーで矢印が指す方向へ抜け、反対側から戻ってくる演出)を実装してください。

- 矢印は inline SVG にし、ボタン内の overflow: clip の小さな枠に入れる(抜けた矢印を枠で切る)
- ホバー開始で1回だけ再生する(ホバー中にループさせない)。全体は {{duration}}s
- 前半 {{exit}}% で、矢印が指す向き(→なら右、↗なら右上)へ矢印自身の大きさの {{travel}}% だけ translate しながら opacity 0 へ。ease-in(cubic-bezier(0.55, 0, 0.75, 0.2))で加速して抜ける
- 抜け切った瞬間に反対側の同じ距離(-{{travel}}%)へ瞬間移動し、残りの時間で元の位置へ戻す。戻りはわずかにオーバーシュートする ease-out(cubic-bezier(0.34, 1.56, 0.64, 1))
- 抜け方は {{mode}}。draw の場合は、抜けながら stroke-dashoffset で線を消し、戻りは pathLength="1" の軸→矢じりの順に時間差で描き直す
- 動かすのは transform / opacity / stroke-dashoffset だけにする(left や margin は使わない)
- :focus-visible でも同じ再生をする。タッチ端末ではタップ時に1回再生する
- prefers-reduced-motion 時は矢印を動かさず、色の変化だけにする

ボタンの矢印アイコンに arrow slide-through(ホバーで矢印が指す方向へ抜け、反対側から戻ってくる演出)を実装してください。

- 矢印は inline SVG にし、ボタン内の overflow: clip の小さな枠に入れる(抜けた矢印を枠で切る)
- ホバー開始で1回だけ再生する(ホバー中にループさせない)。全体は {{duration}}s
- 前半 {{exit}}% で、矢印が指す向き(→なら右、↗なら右上)へ矢印自身の大きさの {{travel}}% だけ translate しながら opacity 0 へ。ease-in(cubic-bezier(0.55, 0, 0.75, 0.2))で加速して抜ける
- 抜け切った瞬間に反対側の同じ距離(-{{travel}}%)へ瞬間移動し、残りの時間で元の位置へ戻す。戻りはわずかにオーバーシュートする ease-out(cubic-bezier(0.34, 1.56, 0.64, 1))
- 抜け方は {{mode}}。draw の場合は、抜けながら stroke-dashoffset で線を消し、戻りは pathLength="1" の軸→矢じりの順に時間差で描き直す
- 動かすのは transform / opacity / stroke-dashoffset だけにする(left や margin は使わない)
- :focus-visible でも同じ再生をする。タッチ端末ではタップ時に1回再生する
- prefers-reduced-motion 時は矢印を動かさず、色の変化だけにする

ボタンの矢印アイコンに arrow slide-through(ホバーで矢印が指す方向へ抜け、反対側から戻ってくる演出)を実装してください。

- 矢印は inline SVG にし、ボタン内の overflow: clip の小さな枠に入れる(抜けた矢印を枠で切る)
- ホバー開始で1回だけ再生する(ホバー中にループさせない)。全体は {{duration}}s
- 前半 {{exit}}% で、矢印が指す向き(→なら右、↗なら右上)へ矢印自身の大きさの {{travel}}% だけ translate しながら opacity 0 へ。ease-in(cubic-bezier(0.55, 0, 0.75, 0.2))で加速して抜ける
- 抜け切った瞬間に反対側の同じ距離(-{{travel}}%)へ瞬間移動し、残りの時間で元の位置へ戻す。戻りはわずかにオーバーシュートする ease-out(cubic-bezier(0.34, 1.56, 0.64, 1))
- 抜け方は {{mode}}。draw の場合は、抜けながら stroke-dashoffset で線を消し、戻りは pathLength="1" の軸→矢じりの順に時間差で描き直す
- 動かすのは transform / opacity / stroke-dashoffset だけにする(left や margin は使わない)
- :focus-visible でも同じ再生をする。タッチ端末ではタップ時に1回再生する
- prefers-reduced-motion 時は矢印を動かさず、色の変化だけにする

03 — Params

duration(抜けて戻るまでの時間 s) — 範囲 0.3〜1.2 / 初期 0.6
抜けて戻るまでの合計。0.5〜0.7sが自然。0.9sを超えるとカーソルが離れた後もまだ戻ってこない。
travel(抜ける距離 %) — 範囲 40〜200 / 初期 120
矢印自身の大きさに対する移動量。100%超で枠の外まで抜け切る。60%以下だと抜けずに「揺れた」に見える。
exit(抜ける側の割合 %) — 範囲 20〜60 / 初期 35
全体のうち、抜けていく前半に使う割合。30〜40%で「素早く抜けて、ゆっくり戻る」になる。50%超は往復運動に見える。
mode(抜け方) — 選択: slide / draw（初期: slide）
slide＝そのまま平行移動で抜けて戻る。draw＝抜けながら線が消え、戻りは軸→矢じりの順に描き直す(SVG stroke)。

04 — Vocab

slide-through — 要素が片側へ抜け、反対側から入って元の位置に戻る動き。移動方向がそのまま「進む」の意味になる。
瞬間移動(テレポート) — キーフレームの35%と36%のように隣り合う2点で位置を飛ばし、見えない間に反対側へ回り込ませる手口。要素は1つで済む。
overflow: clip — 抜けていく矢印を枠で切る。hiddenと違いスクロールコンテナを作らないので、周りのレイアウトに影響しない。
pathLength="1" — SVGパスの長さを1と見なす属性。stroke-dasharray: 1 と stroke-dashoffset: 1→0 だけで、実際の長さを測らずに線を描ける。
ホバー時1回再生 — animation を :hover に付け、iteration は1回。ホバー中ずっとループさせると、押す前から目障りになる。

05 — NG → OK examples

言い方: 「「ボタンの矢印をホバーでアニメーションさせて」」

なぜNG: ほぼ確実に「右へ数pxずれて戻る」transitionが返ってくる。それは揺れ(nudge)であって、枠の外へ抜けて反対側から戻る「進む」の表現にはならない。瞬間移動の一手が言わないと入らない。

言い方: 「「矢印を overflow: clip の枠に入れ、ホバーで1回だけ再生。前半35%で矢印の向きへ120%抜けてopacity 0、反対側-120%へ瞬間移動して残りで戻る。0.6s、戻りはオーバーシュート。reduced-motion時は色だけ」」

なぜOK: 枠で切る構造・抜ける割合・移動量・瞬間移動・イージングの非対称まで指定。「ホバー中にループさせない」を添えると、目障りな無限ループも防げる。