Motion UI - CSS3/Sassで実装されたアニメーションライブラリ
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のオープンソース・ソフトウェアです。