CSS ANIMATION / BORDER EDITOR

CSS Border Motion Studio.

24プリセットから、カードやボタンの動く枠線を作る。

BORDER MOTION WORKSPACE

枠の見た目と動きを調整する

CSS ANIMATION

WHEN TO ANIMATE

一時停止・確認用の背景・コンポーネントの種類はプレビュー用です。コピーCSSには枠線の設定を、HTMLサンプルには選択中のコンポーネントも含めます。

COPY & USE

枠を描く専用のspan要素が必要です。HTMLサンプルには、この構造と現在のCSSを含めています。

24 MOTION PRESETS

見本は静止表示。ホバーまたはキーボードフォーカスで再生します。

SAME BORDER / DIFFERENT COMPONENTS

現在の設定を反映しています。内容・料金は表示確認用のサンプルです。

HOW IT WORKS

専用spanの擬似要素へグラデーションを描き、mask-compositeで中央を除きます。枠は絶対配置なので、太さを変えても内容のレイアウトを押し広げません。

@propertyで角度や割合を登録し、キーフレームで動かします。設定UIにはJavaScriptを使いますが、保存したサンプルの枠線はCSSだけで動きます。

ホバーだけでなく、キーボードフォーカスや内側のボタンへのフォーカスにも反応します。prefers-reduced-motionでは動かさず、静止した枠を表示します。

周回速度と破線：円錐グラデーションの角度を動かす方式です。長方形の外周を一定の速さで移動するパスではありません。破線の見かけの長さや間隔も、辺や縦横比によって変わります。

枠の描画：「描画」は角度に応じたマスクで枠を表示する表現です。SVGのstroke-dashoffsetで線の長さを変える方式ではありません。

組み込み時：HTMLサンプルのリンク先・ボタンの処理・文言は用途に合わせて変更してください。複数の設定を同じページに使う場合は、設定ごとにクラス名を分けてください。