【動作サンプルあり】イージング関数一覧早見&対応表（CSS / jQuery / Anime / GSAP）

早見表シリーズ第三弾は、イージング関数一覧です。ロバート・ペナー氏（Robert Penner）が提唱した標準的なイージング関数を、CSS、JavaScript（標準）、さらに、現在の主要なJavaScriptライブラリであるjQuery（jQuery Easing）、Anime.js、GSAPの指定で比較しています。動作サンプルもあるので、イージング関数をコピーしてお使いください！

表の変化曲線・動作サンプル部分をマウスオーバーすると、動作サンプルが動きます。イージング関数が空欄の場所は、指定ができない箇所になります。

＜その他の一覧早見表＞

• HTML / CSS 一覧早見表（タグ・プロパティ）
• CSSセレクター / 疑似クラス一覧早見表

この記事は、「イージング関数チートシート」と「Easing editor | Anime.js」の情報を元に作成しています。一般的な変化曲線（ベジェ曲線）は、左下から右上に向けて描画されることが多いですが、より感覚的に動きが分かりやすいように、左上から右下に向けての描画にしています。

イージング関数一覧早見&対応表

jQuery単体で使用できるイージング関数は「linear」と「swing」のみです。以降のイージング関数を使用するには、「jQuery Easing」を別途読み込む必要があります。

「Elastic」と「Bounce」は、ユーザーによっては不快に感じる場合もあります。特に激しい変化をさせる場合は、十分に注意して使用してください。

変化曲線（ベジェ曲線）の考え方

イージングの動きは、変化曲線（ベジェ曲線）で表されます。横軸が時間、縦軸が変化量を指しています。一般的には左下を基点に、右上に向かう形で描画されますが、このページでは、より感覚的に分かりやすいように、左上を基点に、右下に向かって描画しています（上下が反転した場合も考え方は同じです）。

また、イージング関数で使われている「In」「Out」「InOut」「OutIn」は、それぞれ次のような意味があります。

• In … ゆっくり始まり速く終わる
• Out … 速く始まりゆっくり終わる
• InOut … ゆっくり始まりゆっくり終わる
• OutIn … 速く始まり速く終わる

CSSでの指定について

CSSで使用できるイージング関数は、「linear」「ease（標準）」「ease-in」「ease-out」「ease-in-out」の5種類ですが、「cubic-bezier」を使うことで、より細かなイージングを指定することができます。また、近年登場した「linear」での指定を行うことで、さらに複雑なイージングを指定することもできます。

/* ---- cubic-bezierの指定例（easeInSine） ---- */
transition: all 0.64s cubic-bezier(0.12, 0, 0.39, 0);

/* ---- linearの指定例（easeOutBounce） ---- */
transition: all 0.64s linear(0, 0.0008, 0.003, 0.0068, 0.0121, 0.0189, 0.0272, 0.0371, 0.0484, 0.0613, 0.0756, 0.0915, 0.1089, 0.1278, 0.1482, 0.1702, 0.1936, 0.2186, 0.245, 0.273, 0.3025, 0.3335, 0.366, 0.4001, 0.4356, 0.4727, 0.5112, 0.5513, 0.5929, 0.636, 0.6806, 0.7268, 0.7744, 0.8236, 0.8742, 0.9264, 0.9801, 0.9828, 0.957, 0.9328, 0.91, 0.8888, 0.869, 0.8508, 0.8341, 0.8189, 0.8052, 0.7931, 0.7824, 0.7733, 0.7656, 0.7595, 0.7549, 0.7518, 0.7502, 0.7502, 0.7516, 0.7546, 0.759, 0.765, 0.7725, 0.7815, 0.792, 0.8041, 0.8176, 0.8327, 0.8492, 0.8673, 0.8869, 0.908, 0.9306, 0.9548, 0.9804, 0.9963, 0.9837, 0.9727, 0.9631, 0.9551, 0.9485, 0.9435, 0.94, 0.938, 0.9375, 0.9386, 0.9411, 0.9452, 0.9507, 0.9578, 0.9664, 0.9765, 0.9881, 0.9994, 0.9934, 0.9889, 0.986, 0.9845, 0.9846, 0.9862, 0.9893, 0.9939, 1) ;

「cubic-bezier」での指定の場合、「cubic-bezier.com」でイージングの変化量を独自に調整して使うことも可能です。

JavaScriptでの指定について

JavaScript（標準）で使用できるイージング関数は、「linear（標準）」「ease」「ease-in」「ease-out」「ease-in-out」の5種類です。それ以外のイージングを使う場合は、「GSAP」「Anime.js」「Tween.js」「jQuery（jQuery Easing）」などの外部ライブラリを使用するか、自身でスクリプトを記述し指定してください。

jQuery（jQuery Easing）での指定について

jQueryでイージング関数を使用する場合、jQuery単体での指定は「linear」「swing（初期値）」の2種類のみです。それ以外のイージング関数を指定する場合は、「jQuery Easing」の読み込みが別途必要になります。

Anime.jsでの指定について

「Anime.js」を使用した場合、「OutIn（速く始まり速く終わる）」の指定が使えます。この指定は、他のJavaScriptライブラリでは再現できない、「Anime.js」独自の指定になります。また、それ以外のイージング関数も数多く用意されていて、「Easing editor」で動きを確認しながら、細かく調整することもできます。

GSAPでの指定について

「GSAP」は、イージング関数の指定方法が他のライブラリと異なるので、ご注意ください。また、バージョンによっても指定方法に違いがあります。バージョン2以前は「Power1.easeIn」のように指定していましたが、バージョン3以降は「power1.in」と短く指定できます（以前の書き方でも指定できますが、新しい指定方法が推奨されています）。また、「GSAP」も「Ease Visualizer」を使用して、イージングを細かく調整することができます。

イージング関数でかんたんアニメーション

ちょっとした動きがつくだけで、WEBサイトの印象は大きく変わります。「Anime.js」や「GSAP」を使ったアニメーションもありますが、CSSだけでも十分に「動きのあるWEBサイト」を印象付けることはできます。イージング関数をじょうずに使って、雰囲気のあるWEBサイトのデザインに挑戦してみてください！

いつでもご相談ください！

ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。

フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。