けーちゃんの自作Webツール

 

※本ツールはJavaScriptで動作します。
JavaScriptが無効になっています。
有効にしてください。

 

css/javascript イージング確認ツール

 

 

cssのanimationプロパティや、JavaScriptのanimateメソッドで使用するtiming-functionを確認するためのツールです。
本ツールは、三つの機能を持っています。

 

 

なお、イージングの変化をあらわすグラフの見方を、こちらで解説しています。

 

イージングキーワードの確認

キーワード:

動作デモ

タイミングイメージ

タイミングイメージ

コード例

  • 共通
  • css
  • JavaScript
  • jQery
  • ■html
    <div id="ease-area">
        <div></div>
    </div>
    
    ■css
    #ease-area{
        height:350px;
        width:350px;
        border: 1px dotted gray;
        background: floralwhite;
    }
    #ease-area div{
        width:50px;
        height:50px;
        background:red;
    }
    
  • #ease-area div{
        animation: movebox 5s ;
    }
    @keyframes movebox {
        0% {
            background-color: #fff;
            border-radius: 0;
            margin-left: 0;
            margin-top: 0;
        }
        25% {
            background-color: #f00;
            border-radius: 50px;
            margin-left: 300px;
            margin-top: 0;
        }
        50% {
            background-color: #0f0;
            border-radius: 0;
            margin-left: 300px;
            margin-top: 300px;
        }
        75% {
            background-color: #00f;
            border-radius: 50px;
            margin-left: 0;
            margin-top: 300px;
        }
        100% {
            background-color: #fff;
            border-radius: 0;
            margin-left: 0;
            margin-top: 0;
        }
    }
    
  • const div = document.querySelector("#ease-area div");
    div.animate(
        {
            backgroundColor : ["#fff","#f00","#0f0" , "#00f" , "#fff"],
            borderRadius : [ "0" , "50px"  , "0" , "50px" , "0" ],
            marginLeft : [ "0" , "300px", "300px" , "0" , "0" ],
            marginTop : [ "0" , "0" , "300px", "300px" , "0" ],
            easing : [ "" ]
        },5000);
    
  • $("#ease-area div")[0].animate(
        {
            backgroundColor : ["#fff","#f00","#0f0" , "#00f" , "#fff"],
            borderRadius : [ "0" , "50px"  , "0" , "50px" , "0" ],
            marginLeft : [ "0" , "300px", "300px" , "0" , "0" ],
            marginTop : [ "0" , "0" , "300px", "300px" , "0" ],
            easing : [ "" ]
        },5000);
    
    ※jQeryのanimateメソッドではなく、Web Animation API のanimateメソッドを呼び出しています
【*】はjQeryの拡張プラグインなどで使用されている値です。

cubic-bezierジェネレーターでの確認

cubic-bezier( , , , )

stepsの確認

steps( , )

イージンググラフの見方

 

変化の様子を表すグラフは、横軸が時間経過の割合を、縦軸が変換の割合を示しています。

 

いずれも原点が0%で、最も右側および最も上側が100%です。

 

イージング グラフの見方

 

次のグラフは、4分の3程度時間が経過した時点で、変化量は4分の1です。

 

イージング グラフの見方

 

これはゆっくりと変化することをあらわします。
それ以降は00%に向けて、急激に変化することが見て取れます。

 

次のグラフは、steps( 4 , jump-both ) を指定したときの変化の様子です。

 

イージング グラフ steps

 

スタートの時点で、20%変化した状態です。
その状態で表示が継続され、一定時間経過すると40%変化した状態で描画されます。

 

これを繰り返しますが、最後の青い線は100%に到達していません。
そのため、100%の変化を描画することなく終了します。