イージング曲線エディタ
Easing Curve Editor
動くプレビューを見ながらcubic-bezierやスプリング曲線を調整し、CSSのタイミング関数を出力します。
3次ベジェのイージング曲線をドラッグして作り、それが実際の動きに何をするかを見せます。ブラウザ自身のコンポジタが動かすブロックと、同じ曲線を等間隔の時刻で標本化した帯を並べます。感覚ではなく形として読めるようにするためです。
どちらの点もドラッグできます。フォーカスを当てて矢印キーでも動かせて、shift を押しながらなら 10 倍ずつ進みます。網かけの帯が 0 から 1 まで、その上下はオーバーシュートの分です。CSS が x だけを制限して y を自由にしているから存在する余白です。
CSS がそう決めているので x は 0–1 に収めます。この範囲を外れると宣言全体が無効になり、ブラウザは捨てます。y はわざと自由にしてあります。1 を超えるとオーバーシュート、0 を下回ると助走になり、人が手で曲線をいじる理由はたいていそこにあります。
下の帯は、同じ曲線を等間隔の時間 20 か所で標本化したものです。印が詰まっていればそこは遅く、離れていれば速い。曲線の形を動きとして言い直したものです。
プリセット
CSS
transition: all 900ms cubic-bezier(0.34, 1.56, 0.64, 1);使い方
制御点を2つ動かします
フォーカスを当てて矢印キーでも動かせます。shiftを一緒に押すと10倍ずつ動きます。再現したい曲線があれば、下の数値欄に直接入力できます。
ブロックより帯を見ます
動いているブロックは読み取りにくいものです。その下の印は同じ曲線を20等分の時刻で打ったもので、詰まっていれば遅く、離れていれば速いということです。
値かtransition全体をコピーします
制御点がちょうどキーワードと一致したときは、`ease`や`ease-in-out`のようにそのキーワードのほうを出します。短いうえに意図を言い表すからです。
よくある質問
xを0〜1の外に動かせないのはなぜですか。
CSSが禁じているからです。xがその範囲を外れると宣言全体が無効になり、ブラウザはそのプロパティを捨てます。だから、黙って何もしない値を作らせる代わりに範囲内に留めています。
yが0〜1を外れると何になりますか。
1を超えればオーバーシュートで、要素が目標を行き過ぎてから戻ります。0を下回れば予備動作で、動き出す前に逆へ少し引きます。キーワードを使わずに曲線を自分でいじる理由は、たいていこの2つです。
プレビューは正確ですか。
正確です。タイミング関数をCSSアニメーションとしてブラウザに渡していて、実際の`transition`が通るのと同じ経路です。JavaScriptのループで曲線を標本化すれば似て見えますが、同じものではありません。
スプリングやバウンスも作れますか。
本物は作れません。3次ベジェは制御点が2つで、行き過ぎられるのは1回だけです。スプリングは振動するので、停止点をたくさん置いた`linear()`か、物理ベースのアニメーションライブラリが要ります。ここのオーバーシュートが、曲線1本で届くいちばん近いところです。
ここから渡せます
次の一手
このツールが出したものをそのまま受け取れる道具です。
CSS整形・圧縮
CSS Beautifier & Minifier
並べ替えを一切せずにCSSを整形または圧縮し、トークンの並びをそのまま保ちます。
ボックスシャドウ生成
Box Shadow Generator
複数枚重ねたボックスシャドウとテキストシャドウをプレビューしながら組み立て、CSSを出力します。
SVGパス編集
SVG Path Editor
パスデータを絶対・相対コマンドで書き換え、移動・拡大・回転・向きの反転を加え、バウンディングボックスとプレビューを表示します。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。