CSSのすごいアイデアから実用的なテクニックまで！スタイルシートの最新テクニックのまとめ

最近のWebサイトやアプリで見かけるアニメーションを使った操作が気持ちいいUIエレメントを実装するスタイルシートを紹介します。

デモではHTMLやCSSのコードが掲載されているので、コピペで簡単に利用できます。
※一部JavaScriptも必要最小限で使用しています。

イラスト: Girls Design Materials

Card UI Team Grid in Pure CSS
デモページ

ホバー時に各カードがふわっと浮かび上がるカード型レイアウト。

Scroll down Arrow with Bounce Animation
デモページ

縦長ページでよく見かける、下にスクロールしてねを表現するバウンドするアロー。

Donut Chart with Expanding Data on Click
デモページ

ドーナツ型のパイチャートをクリックすると、それに応じたコンテンツを表示。

Text Underline Effect on Hover
デモページ

下線付きのリンク時のホバー時のエフェクト。

Burn-in Text Animation Effect
デモページ

テキストをかっこいいアニメーションで表示します。

Sticky Header Navigation Menu
デモページ

ヘッダの下部にあるナビゲーションだけを固定表示。

Card UI Wave Animation
デモページ

波状にうねうねするアニメーションを使ったカード型UI。

Skewed Flexbox Panel Transformation On Hover
デモページ

Flexboxで斜めに配置されたパネルは、ホバー時に広げて表示されます。
アニメーションGIFにしたら1MB軽く越えてしまったので、静止画で。

Card Fold Down Hover Animation
デモページ

カードをホバーすると、ぱたりと開きます。

Colorful Timeline Style Navigation
デモページ

カラフルなタイムラインスタイルのナビゲーションを使ったコンテンツ。スムーズスクロールにスクリプトを使用。

Experimental Pull to Reveal Navigation
デモページ

ホールド・ドラッグすると、美しいアニメーションでコンテンツが切り替わります。

Drop-down List with Hover Animation
デモページ

ドロップダウンのリストをかっこいいアニメーションで表示します。

Colorful CSS Accordion Tabs
デモページ

CSSだけで実装されたとは思えないほど、面白いアニメーションを備えたアコーディオン型のタブ。

Pure CSS No Label Color Tabs
デモページ

ラベル無しのタブでコンテンツが切り替わります。

Pure CSS Twitter Heart Animation
デモページ

ハートが弾けるかわいいアニメーション。