Micron.js - CSSアニメーションをJavaScriptで制御
CSS3によってアニメーション機能が強化されています。JavaScriptで動きを書かなくて良くなっているのは良いことですが、それでもユーザ操作を受けて動かしたり、より細かく制御するためにはJavaScriptの存在は欠かせません。 そこで使ってみたいのがMicron.jsです。CSSアニメーションをJavaScript制御する、そんなUIライブラリです。
Micron.jsの使い方
Micron.jsの表現です。シェイクとフェード。
tada(ジャジャーン)と溝。
フリッカーと引っ張り。
ブリンクとポップ。
スウィングと絞り。
ジェリーとバウンド。
応用するとこんな動きもできます。
Micron.jsは小さなアニメーションが多数入っており、それらを組み合わせることでユニークな動きが実現できます。アニメーション自体はCSSによるものなのでスムーズで負荷も小さいのが利点です。
Micron.jsはJavaScript/CSS製のオープンソース・ソフトウェア(MIT)です。
Micron.js - Webkul webkul/micron: a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power