ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2