CSS MOTION LAB

Motion Path Generator

Figmaで描いたpathを、CSSの動きに。

CSS offset-path対応

CONTROLS

軌道と動きを作る

PATH PRESETS

ARC

FIGMA / SVG

SVG path の d

FigmaでコピーしたSVGのd="..."も貼り付けられます。

ORIENTATION

AUTO

TIMING

SMOOTH

時間2400 ms

待機300 ms

軌跡を表示移動の流れを残像で確認します 自動再生設定変更後にすぐ再生します

LIVE PREVIEW

START

END

MOVE

ダブルクリックでアンカー追加

PATH LENGTH742pixels

ROTATEAUTOoffset-rotate

DURATION2400milliseconds

EASINGSMOOTHtiming function

CSS OUTPUT

LIVE VALUE offset-path

ドラッグした軌道を、そのままCSSへ反映します。