First CHTools無料Webツール

FIRST CH TOOLS / デザイン / 51 CUBIC-BEZIER EASING PREVIEW

イージング（cubic-bezier）プレビュー＆比較

CSSアニメーションの速度曲線を、つまみをドラッグしながら決めるツールです。2つのイージングを並べて同時に走らせるので、「どちらが気持ちいいか」をその場で見くらべられます。ease-out-expo などの定番プリセット、linear() 関数への近似出力つき。

曲線を決めます

時間 0.0 → 1.0

横軸＝時間（0→1）、縦軸＝進み（0→1）。丸いつまみをドラッグするか、つまみを選んでから矢印キーで動かせます（Shiftで10倍）。編集するのは選んでいるほうの曲線（いまは 曲線A）です。薄く塗った帯は 0〜1 の外側＝行き過ぎの領域です。

数値で入れる

他サイトの実測値（DevToolsでコピーした cubic-bezier(…)）をそのまま貼り付けられます。ease-out のようなキーワードや、プリセット名（ease-out-expo など）も読み取ります。

並べて走らせる
ease-out-back0%
ease0%
経過 0%

帯の下に並ぶ細い線は等間隔の時間ごとの位置です。線が詰まっているところは遅く、離れているところは速く動いています。帯の中の縦線は進み 0 と 1 の位置で、行き過ぎ（back系）はこの線を追い越してから戻ります。

110.0%
いちばん高いところ
0.00×
いちばん速い瞬間（平均比）
0
linear() の点数
0
近似の最大誤差
生成したCSS 

  


  

    

      linear() で近似する
      
        
        
      
    

    
    

    
linear() は折れ線なので、cubic-bezier では書けない動き（バウンド・弾み・多段の加速）も表せます。ここでは選んでいる曲線をそのまま折れ線に置き換えた結果を出しています。

  


  

    
チェック結果

    
    
  
    

  
    動かす色は カラーコード変換＆アルファ透過計算機、背景のグラデーションは CSSグラデーションジェネレーター、画面幅に応じて変わるサイズは CSS clamp() 計算機で作れます。
    
  
    

  

  

  
    
  
    
    
    How to Use
    
    
      
      
    1. 曲線を決めるグラフのつまみをドラッグするか、「プリセット」タブから ease-out-expo などを選びます。他サイトから取ってきた cubic-bezier(…) は貼り付け欄からそのまま読み込めます。
      2. 
      
    2. 並べて見くらべる「曲線B」に別のイージングを入れると、2本が同時に走ります。時間スライダーと「動かすもの」を変えて、実際に使う条件で確かめます。
      3. 
      
    3. コピーして貼る「値をコピー」で cubic-bezier(…) だけ、「宣言をコピー」でカスタムプロパティ込みのCSSを取れます。linear() 近似も同じ欄からコピーできます。
      4. 
    
    
  
    

  
    
    
    About This Tool
    
    
    イージングは「時間に対する進みぐあい」です。CSSの cubic-bezier(x1, y1, x2, y2) は、(0,0) から (1,1) へ向かう3次ベジェ曲線を2つの制御点で曲げたもので、横軸が時間・縦軸が進みを表します。このツールはその制御点をGUIで動かし、曲線の形・実際の動き・CSSの3つを同時に見られるようにしたものです。進み率の計算は、ブラウザ（WebKit の UnitBezier）と同じ手順——ニュートン法で時間を逆算し、収束しない区間だけ二分法に落とす——で行っているので、画面の動きと出力したCSSの動きが一致します。
    
    
    2本を並べて走らせるのが主目的です。イージングは単体で見ても良し悪しが分かりません。AとBに別々の曲線を入れると、同じ時間・同じ距離で同時に走るので差がはっきり出ます。帯の下に並ぶ細い線は等間隔の時間ごとの位置＝残像で、線の密度がそのまま速さの分布になっています（詰まっている＝遅い）。行き過ぎる曲線でも枠からはみ出さないよう、AとBの値域をまとめて帯の幅へ写しているため、進み 0 と 1 の位置は帯の中の縦線で示しています。
    
    
    linear() への近似も出します。3次ベジェは山ひとつまでしか表せないため、バウンドのような動きは書けません。CSSの linear() は点をつないだ折れ線で緩急を指定する関数で、このツールは曲線を600点でサンプルしたうえで、縦方向（進み）の誤差が指定値以下になるまで点を間引いて出力します。誤差を横方向や点の間隔で測ると、急峻な区間の誤差が見逃されます——linear() が点と点の間を直線で補間する以上、測るべきは縦方向の差です。出力の下に実際の最大誤差と点数を表示しています。
    
    
    参考サイトの実測値を確かめる用途にも使えます。DevToolsでコピーした cubic-bezier(…) を貼り付けると、曲線の形と実際の動きがすぐ見られます。計算はすべてブラウザ内で完結し、入力はサーバーへ送信されません。URLパラメータで直接呼び出せます: /easing/?a=0.34,1.56,0.64,1&b=ease-out-expo&dur=900&prop=x
    
  
    

  
    
    
    定番の cubic-bezier 値の一覧（ease-out-expo など24種）
    
    
    「プリセット」タブに入っている標準カーブと行き過ぎ（back）の値です。cubic-bezier(0.16, 1, 0.3, 1) は ease-out-expo、cubic-bezier(0.22, 1, 0.36, 1) は ease-out-quint、cubic-bezier(0.25, 1, 0.5, 1) は ease-out-quart です。2行目は easings.net などで使われている名前（easeOutExpo の形）で、数値は同じです。名前を押すと、その曲線を ease（CSSの既定）と並べて走らせます。
    
    
    「時間の半分での進み」は、アニメーションの時間が半分たった時点でどこまで進んでいるかを、このツールと同じ計算で求めたものです。ease-out 系は数字が大きいほど前半で一気に動いて後半はほぼ止まっている曲線で、ease-out-expo は半分の時間で97%まで進みます。100%を超える・0%を下回るのは行き過ぎる曲線です。
    
    
    
      
    
        
    名前cubic-bezier の値時間の半分での進み
    
        
          
    ease-in-sine
    easeInSine    		cubic-bezier(0.12, 0, 0.39, 0)30%
    
          
    ease-out-sine
    easeOutSine    		cubic-bezier(0.61, 1, 0.88, 1)70%
    
          
    ease-in-out-sine
    easeInOutSine    		cubic-bezier(0.37, 0, 0.63, 1)50%
    
          
    ease-in-quad
    easeInQuad    		cubic-bezier(0.11, 0, 0.5, 0)25%
    
          
    ease-out-quad
    easeOutQuad    		cubic-bezier(0.5, 1, 0.89, 1)75%
    
          
    ease-in-out-quad
    easeInOutQuad    		cubic-bezier(0.45, 0, 0.55, 1)50%
    
          
    ease-in-cubic
    easeInCubic    		cubic-bezier(0.32, 0, 0.67, 0)13%
    
          
    ease-out-cubic
    easeOutCubic    		cubic-bezier(0.33, 1, 0.68, 1)87%
    
          
    ease-in-out-cubic
    easeInOutCubic    		cubic-bezier(0.65, 0, 0.35, 1)50%
    
          
    ease-in-quart
    easeInQuart    		cubic-bezier(0.5, 0, 0.75, 0)7%
    
          
    ease-out-quart
    easeOutQuart    		cubic-bezier(0.25, 1, 0.5, 1)93%
    
          
    ease-in-out-quart
    easeInOutQuart    		cubic-bezier(0.76, 0, 0.24, 1)50%
    
          
    ease-in-quint
    easeInQuint    		cubic-bezier(0.64, 0, 0.78, 0)4%
    
          
    ease-out-quint
    easeOutQuint    		cubic-bezier(0.22, 1, 0.36, 1)96%
    
          
    ease-in-out-quint
    easeInOutQuint    		cubic-bezier(0.83, 0, 0.17, 1)50%
    
          
    ease-in-expo
    easeInExpo    		cubic-bezier(0.7, 0, 0.84, 0)3%
    
          
    ease-out-expo
    easeOutExpo    		cubic-bezier(0.16, 1, 0.3, 1)97%
    
          
    ease-in-out-expo
    easeInOutExpo    		cubic-bezier(0.87, 0, 0.13, 1)50%
    
          
    ease-in-circ
    easeInCirc    		cubic-bezier(0.55, 0, 1, 0.45)13%
    
          
    ease-out-circ
    easeOutCirc    		cubic-bezier(0, 0.55, 0.45, 1)87%
    
          
    ease-in-out-circ
    easeInOutCirc    		cubic-bezier(0.85, 0, 0.15, 1)50%
    
          
    ease-in-back
    easeInBack    		cubic-bezier(0.36, 0, 0.66, -0.56)-9%
    
          
    ease-out-back
    easeOutBack    		cubic-bezier(0.34, 1.56, 0.64, 1)109%
    
          
    ease-in-out-back
    easeInOutBack    		cubic-bezier(0.68, -0.6, 0.32, 1.6)50%
    
            
      
    
    
    
  
    

  
    
    
    Other Tools