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

Web上でアニメーションを実現する方法は幾つかあります。JavaScript、SVG、CSS3アニメーション、Canvasなどと選択肢があり、どれがベストなのか考えてしまうかも知れません。GPUを使いつつ、手軽に使い始められそうなものとしてCSS3があります。

今回紹介するMotion UIはCSS3のアニメーション機能を提供するライブラリです。CSSフレームワークとして有名なZurb Frameworkの開発元が提供しています。

Motion UIの使い方

Motion UIによるアニメーションのデモです。ヒンジと名付けられている、開くようなアニメーションです。

スライド系。

スライドしつつ、最後にバウンドするような感じ。

最後に速度が若干緩むアニメーション。

Motion UIはアニメーションがすべてSassで作成されています。後は

MotionUI.animateIn('#element', 'fadeIn');
のように指定することでアニメーションが実行できる仕組みです。回転したり、スライドで出現したりするアニメーションが簡単に実現できるようになります。

Motion UIはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。

Motion UI | Playground from ZURB

zurb/motion-ui

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2