緩急をともなったイージングのアニメーションをCSSやJSで実装する時のスニペットのまとめ -Easing Functions

にょい～ん、ぐい～んなどの緩急をともなったアニメーションを実装するCSSやJavaScriptのスニペットをまとめたEasing Functionsを紹介します。

Easing Functions Cheat Sheet
Easing Functions -GitHub

• イージングのアニメーションの動きを確認
• イージングのアニメーションの種類
• イージングのアニメーションの実装

イージングのアニメーションの動きを確認

イージングとは動きに加速や減速を加え等速で動くのとは違ったエフェクトを与えるもので、最初ゆっくりでだんだん早くしたり、床にバウンドするような動きを与えます。

登録されているイージングのアニメーションの動きは、それぞれのグラフをホバーするとレッドのアローがその動きをします。

イージングの動きを確認

イージングのアニメーションの種類

イージングのアニメーションは全部で30種類あり、上24種類がCSS, JavaScriptで実装可能なもの、下6種類がJavaScriptで実装可能なものです。

CSS, JavaScriptで実装するイージングのアニメーション

JavaScriptで実装するイージングのアニメーション

イージングのアニメーションの実装

各イージングのアニメーションの実装は、グラフをクリックすると実装方法が表示されます。

easeInSine

JavaScriptで実装

JavaScriptの場合は「jQuery Easing Plugin」を使用します。
easeInSineだと、下記のようになります。

div.animate({ top: '-=100px' }, 600, 'easeInSine', function () { … })

CSSで実装

CSSはCSS3アニメーションで実装します。

div {
  -webkit-transition: all 600ms cubic‑bezier(0.47, 0, 0.745, 0.715);
  -moz-transition:    all 600ms cubic‑bezier(0.47, 0, 0.745, 0.715);
  -ms-transition:     all 600ms cubic‑bezier(0.47, 0, 0.745, 0.715);
  -o-transition:      all 600ms cubic‑bezier(0.47, 0, 0.745, 0.715);
  transition:         all 600ms cubic‑bezier(0.47, 0, 0.745, 0.715); }