このツールはブラウザで即時実行できます。登録もサーバー処理も不要です。
このツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドこのツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドスムーズなCSSトランジション向けのイージング曲線を可視化して出力します。
切り替えると 再生 現在のカーブでトランジションを再生します。
モーション デザイン、インタラクション用の 3 次ベジェ イージング カーブを作成および調整する
インタラクティブなコントロール ポイントから有効な 3 次ベジエ値を生成します。
ホバー、開始、終了、およびアテンション アニメーションのイージング プロファイルを比較するのに役立ちます。
再利用可能なイージング トークンを使用してモーション タイミングの決定を標準化します。
コントロール ポイント
(0.22, 1, 0.36, 1)
きびきびとしたカーブ
(0.2, 0.8, 0.2, 1)
終了カーブ
(0.4, 0, 1, 1)
CSS イージング
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
トークン マッピング
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
モーションノート
バランスの取れたインタラクションリズムのために、相補的な開始および終了カーブを使用します。
カーブがオーバーシュートし、不自然に感じます
コントロール ポイントを標準のイーズアウト アンカーに近づけて調整します。
さまざまなコンポーネントがアニメーション化されます。一貫性がありません
デザイン システム全体で共有イージング トークンを採用します。
アニメーションが遅く感じる
必要に応じて、イージング更新の持続時間を短くします。
カーブの終了と入力の競合
方向固有の定義
CSSキュービックベジェジェネレーター は、提出・公開・引き継ぎの前に行う迅速な検証ステップとして運用するのが適切です。
イージング トークンはいくつあれば十分ですか?
ほとんどのシステムは、4 ～ 8 個のセマンティック イージング トークンのコンパクトなセットで適切に動作します。
1 つのカーブですべてのインタラクションに適合できますか?
通常はいいえ。さまざまなインタラクション タイプは、カスタマイズされたイージングから恩恵を受けます。
期間とイージングを一緒に調整する必要がありますか?
はい、イージングの品質は選択した期間に大きく依存します。
リニアは良い選択ですか?
リニアは継続的な進行には便利ですが、UI フィードバックにはあまり不自然ですモーション。