面倒なCSSアニメーションもこれで簡単に実装できる！ 繊細な動きを最優先にしたフレームワーク -EaseMotion CSS

WebサイトやスマホアプリのUI要素やコンポーネント、レイアウトに繊細なアニメーションによる動きを加えるCSSフレームワークを紹介します。

依存関係はゼロ、非常に軽量で、初心者でも扱いやすいCSSに設計されています。class名も分かりやすく、ease-fade-in, ease-slide-up, ease-delay-100とその名からアニメーションの動作が想像できると思います。

EaseMotion CSS
EaseMotion CSS -GitHub

• EaseMotion CSSの特徴
• EaseMotion CSSのデモ
• EaseMotion CSSの使い方

EaseMotion CSSの特徴

EaseMotion CSSは繊細なアニメーションを最優先にして、再利用可能なUIコンポーネント、モダンなエフェクト、そして依存関係ゼロを特徴とするCSSのフレームワークです。軽量で、初心者にも扱いやすく、さまざまなWebサイトやスマホアプリに利用できます。

MITライセンスで、商用プロジェクトでも無料で利用できます。

EaseMotion CSS

サポートしているブラウザは、下記の通り。
IEを除く、すべてのブラウザって感じです。

• Chrome 49+
• Edge 15+
• Safari 9.1+
• Firefox 31+
• Opera 36+

EaseMotion CSSでは、class名が自然な英語で読めるように定義されており、ビルドツールや複雑な設定を必要とせず、表現力豊かな動きとクリーンなHTMLを求める開発者のために設計されています。また、カスタマイズもCSS変数で簡単にできます。

EaseMotion CSSのデモ

デモでは、EaseMotion CSSで実装されたさまざまな繊細なアニメーションを楽しめます。
まず、UIに欠かせないボタン。ボタンは、class名を重ねて記述することで簡単に実装できます。

ボタン: デモページ

柔軟なカードシステムで、基本classと修飾classを組み合わせて、あらゆるパターンのカードを実装できます。

カード: デモページ

各ボックスをクリックすると、そのアニメーションが再生されます。構成可能な遅延classを使用すると、登場シーンのシーケンスを作成できます。

アニメーション: デモページ

1つのclassに対して、1つの意図が割り当てられています。フレックスボックスやグリッドレイアウトも分かりやすい英語で簡単に実装できます。

レイアウト: デモページ

EaseMotion CSSの使い方

EaseMotion CSSの使い方は、簡単です。
メインのCSSファイルを外部ファイルとしてHTML内に記述します。

推奨は上記のCDN経由ですが、代替のCDNも用意されています。また、CSSファイルをダウンロードして利用してもOKです。

特定のコンポーネントごとに個別のスタイルシートを外部ファイルとして記述します。これは必要なものだけを記述してください。

アニメーションのCSSもモジュール式になっているので、必要なものだけを記述します。

さらに詳しくは、ドキュメントをご覧ください。

ドキュメント -EaseMotion CSS

複数のアニメーションを組み合わせたいときは、アニメーションを見ながら設定できるツールも用意されています。

アニメーションの組み合わせビルダー

さらに詳細に設定したいときは、アニメーションスタジオが便利です。

アニメーションスタジオ