以前ここで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アニメーションでイージングを付けたい際にぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

アニメーションのイージング処理をjQueryやCSSで実装する際に記述方法を確認できる「Easing Functions Cheat Sheet」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner