easing（イージング）ってあんまりよく分かってなかったけど、これを機会に動きを見てみて。

そもそもeasing（イージング）って何？みたいなところの人もぜひ。

easing（イージング）……エフェクトの動きを加速／減速させる。
英語では「和らげる、緩和する」の意味。

つまりは、等速で動かすのではなく、「すぅーーっと動かしたい」ときに便利な技です。



まずはデモから easingのデモページ

このデモでは、「linear」（リニア）、「ease-in」（イーズイン）、「ease-out」（イーズアウト）の3つの動きで同時に動かしています。

最もシンプルなCSSの書き方

まずは基本となるCSSの書き方

記述例

-moz-transition: 1s ease-in;
-webkit-transition: 1s ease-in;
-o-transition: 1s ease-in;
-ms-transition: 1s ease-in;

-moz、-webkit、-o、-msから始まるCSSはそれぞれ、
・Mozilla系（FireFoxなど）
・Webkit系（Chromeなど）
・Opera系
・マイクロソフト系（IEなど）
のブラウザはそれぞれのCSSを読んでね。という意味です。

すうーーっと動かしたいCSSは「transition」で指定してあげます。

それぞれの動き方

それぞれの動き方は、
linear……ずっと一定
ease-in……出だしは遅く、終わりが速い
ease-out……出だしは速く、終わりが遅い

注意すべきは、どれも1秒指定（スタート時から動作終了時までの時間が1秒）です。

結局どれがいいんだろう？

客観的に見て、ストレスなく見れるのが一番です。
今回のように、「ものを動かしたい」場合、linearやease-outがよいかもしれません。
ease-inだと、出だしが遅くてなんだかちょっと気持ち悪いと思う人もいるかも。

デモはこちらからも easingのデモページ

Written by Creative Flake