緩急をともなったイージングのアニメーションを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); }

top of page

©2017 coliss