以前ここでjQueryでアニメーションにイージング処理をつける際の方法として
jQueryアニメーションにイージング(easing)処理をつけるプラグイン
【イージング動作サンプル一覧】
」と題した記事を紹介しましたが、
同じようにイージング動作をリスト化したサイトで
jQueryだけでなくCSS(CSS3)アニメーションを使ってのイージング処理の記述方法を
紹介しているチートシートサイト「Easing Functions Cheat Sheet」が
この先とても役に立ちそうだったので自分用メモとしてご紹介。

Easing Functions Cheat Sheet


Easing Functions Cheat Sheet

画面上には30種類のイージングがベジェ曲線で表現された一覧で並べられていて
一つ一つにマウスオーバーすることで赤い矢印によって動作サンプルを
確認することができるようになっています。

使いたいイージングをクリックすることで
コピペして貼り付けて使用することができる形で
記述方法が表示されます。

30種類のうちの最初の24個が
jQueryとCSSでの使用方法が紹介されていて
最後の6つはjQueryのみとなっています。

jQueryでイージングをつける際には
使用する名前を記述すれば実装できるので楽なのですが
CSSアニメーションで使用する際には
こういったコピペして使えるチートシートがあると
かなり便利になるかと思います。

jQueryやCSSアニメーションでイージングを付けたい際にぜひ。。。