マテリアルデザインのアニメーション大全サンプル集付き。
Photo credit: Gattou - Lucie Provencher
※2015/11/9日時点の情報です。
いま流行中のマテリアルデザインの肝は？と聞かれるとやっぱりアニメーションですよね。シンプルなアニメーションによってユーザーインターフェイスの意図が伝わり易くなります。
マテリアルデザインで使われるアニメーションについてのパターンや情報がまとまっているページが見当たらなかったのでこの記事にずらーっとまとめて行きます。
Dribbbleでマテリアル＋アニメーションで検索
Dribbbleで検索すると良質なサンプルがたくさん見つかります。
dribbble.com
dribbble.com
dribbble.com
dribbble.com
dribbble.com
CODEPENで公開されているサンプル
CSSのみでボタンアニメーション
カーソルに合わせるとプレステのコントローラーのように分割するボタン
プリローダー
codepen.io
Material Preloaderも合わせてご覧ください。
materialupで見るサンプル
ボタンのアニメーションパターン
マテリアルデザインのサンプルを探すのにCodePEN、Dribbble以外ではMaterial Design, Daily – MaterialUpもおススメです。
Googleマテリアルデザインガイドからアニメーションの説明
- Authentic motion - Animation - Google design guidelines
- Responsive interaction - Animation - Google design guidelines
- Meaningful transitions - Animation - Google design guidelines
- Delightful details - Animation - Google design guidelines
日本語の翻訳を見つけたのでこちらも合わせてご覧ください。
マテリアルデザインのサポートしているJS向けのCSSフレームワーク
- Material UI （React向け）
- Angular-Material（Angular.js向け）
