ボーダードロー — 動きの伝え方辞典

hover

border draw / outline animation

ボーダードロー

ホバーで枠線が一筆書きのように描かれていくボタン演出。4辺を擬似要素2つのscaleX/Yで順に伸ばす定番テクで、「囲まれる」過程そのものが視線を引く。

01 — Demo video

Play live →

02 — Prompt template

ボタンに border draw(ホバーで枠線が一筆書きのように描かれる演出)を実装してください。

- 枠線はborderではなく擬似要素2つ(::before / ::after)で作り、それぞれがL字型に2辺ずつを担当する
- 各辺は width/height ではなく transform: scaleX / scaleY で伸ばす(リフロー禁止)
- transform-origin を辺ごとに「描き始めの端」に設定し、transition-delay で 上→右→下→左 の順に連鎖させる
- 線の太さは {{thickness}}px、4辺合計 {{duration}}s(1辺あたり {{duration}}/4 s)、速度が均一に見えるよう linear で描く
- マウスが離れたら逆順(左→下→右→上)に消していく
- prefers-reduced-motion 時はアニメーションなしで枠線を常時表示する

ボタンに border draw(ホバーで枠線が一筆書きのように描かれる演出)を実装してください。

- 枠線はborderではなく擬似要素2つ(::before / ::after)で作り、それぞれがL字型に2辺ずつを担当する
- 各辺は width/height ではなく transform: scaleX / scaleY で伸ばす(リフロー禁止)
- transform-origin を辺ごとに「描き始めの端」に設定し、transition-delay で 上→右→下→左 の順に連鎖させる
- 線の太さは {{thickness}}px、4辺合計 {{duration}}s(1辺あたり {{duration}}/4 s)、速度が均一に見えるよう linear で描く
- マウスが離れたら逆順(左→下→右→上)に消していく
- prefers-reduced-motion 時はアニメーションなしで枠線を常時表示する

ボタンに border draw(ホバーで枠線が一筆書きのように描かれる演出)を実装してください。

- 枠線はborderではなく擬似要素2つ(::before / ::after)で作り、それぞれがL字型に2辺ずつを担当する
- 各辺は width/height ではなく transform: scaleX / scaleY で伸ばす(リフロー禁止)
- transform-origin を辺ごとに「描き始めの端」に設定し、transition-delay で 上→右→下→左 の順に連鎖させる
- 線の太さは {{thickness}}px、4辺合計 {{duration}}s(1辺あたり {{duration}}/4 s)、速度が均一に見えるよう linear で描く
- マウスが離れたら逆順(左→下→右→上)に消していく
- prefers-reduced-motion 時はアニメーションなしで枠線を常時表示する

03 — Params

duration(4辺合計の時間 s) — 範囲 0.3〜2 / 初期 0.8
0.6〜1.0sが一筆書きらしさと待ち時間のバランス。1.5s超は描き終わる前に離脱される。
thickness(線の太さ px) — 範囲 1〜4 / 初期 1
1〜2pxが上品。3px以上はポップな印象に寄るのでトンマナと相談。

04 — Vocab

L字分割 — ::beforeが上+右、::afterが下+左のように擬似要素2つに2辺ずつ担当させる定番の分割法。要素を増やさず4辺を制御できる。
transition-delay — 連鎖の要。前の辺のdurationぶん遅らせて開始すると1本の線が走って見える。
transform-origin — 各辺の伸び始めの位置。前の辺の終点と揃えないと線が「途中から生える」。
scaleX / scaleY — width/heightをいじらず線を伸ばす。レイアウト計算(リフロー)が走らないので細い線でも滑らか。

05 — NG → OK examples

言い方: 「「ホバーしたら枠が出るようにして」」

なぜNG: 「出る」だけではborderの単純表示やopacityフェードが返ってくる。「一筆書き」の順序性と、どの角から描き始めるかは明示しないと伝わらない。

言い方: 「「border drawを::before/::afterのL字2分割で。各辺scaleX/Y + transition-delayで上→右→下→左に連鎖、合計0.8s・線1px・linear。leaveは逆順で消す」」

なぜOK: 実装方式(擬似要素のL字分割)・順序・数値・タイミング関数まで指定。「scaleで伸ばす」の一言がwidthアニメーションの重い実装を防ぐ。