CSSのみ！動きのあるデザインをコピー＆ペーストで実装できるサンプルコード集

自由度の高い表現が可能になったCSS3は、簡単なアニメーションや動きをつけることもできます。

今回は、CSSだけでできる動きのあるデザインをピックアップしてご紹介します。

フロントエンジニアの方にとっては、CSSテクニックのレパートリーが増えるだけでなく、コピー＆ペーストで手軽に利用できますので、動きのある表現をしたいという時に取り入れてみてはいかがでしょうか。

CSSだけで表現できる動きのあるテクニックまとめ

1.CSS3フルスクリーン背景スライドショー

DigitalSkill
CSSのみでフルスクリーン背景のスライドショー、タイトル表示をおこなうチュートリアルです。
アニメーション部分は、複数パターンのサンプルデモを公開しています。

2.Fullscreen Overlay Effects

codrops
クリックすると、フルスクリーンのオーバーレイがかかるエフェクトのサンプルです。
コーナー、スライド、小さな箱で埋め尽くすようなものまで様々なスタイルの動きを用意しています。

3.スクリプト無し、動画をページの背景いっぱいに表示する方法

coliss
jQueryのようなスクリプトを使わずとも、CSSだけで背景全体に動画を表示することが可能です。
今主流のレスポンシブデザインにも対応していますので、動画を使いたいと思ったらぜひ取り入れたい方法となっています。

4.Ideas for Subtle Hover Effects

Hover Effect Ideas
画像にマウスオーバーすると、キャプションを表示してくれるCSSのサンプルです。
エフェクトにはそれぞれLily、Honey、Sadieといったネーミングがついていて、名前の雰囲気に合わせて色、デザインが変わるようになっています。

手軽に画像をお洒落にしたい時にぴったりです。

5.CSSのみで実装するキャプションエフェクト 20

NxWorld
CSSでエフェクト付きキャプションを表示する方法20個を紹介しています。
画像のマウスオーバー時はもちろん、様々なシーンで使いやすい方法です。

動きのバリエーションが豊富ですので、躍動感のあるデザインにすることができます。

6.iHover

iHover
円形の画像にマウスオーバーすると、キャプションとともに動きのあるエフェクトをかけるスタイル一覧です。
全部で15個ものスタイルを一気に紹介しています。

7.Inspiration for Text Input Effects

codrops
入力フォームに素敵なエフェクトをかけるサンプルコードです。
文字を入れようとクリックすると鮮やかな色のラインが横から飛び出してくるスタイルのほか、複数のスタイルをデモ付きで紹介しています。

8.Arrow Navigation Styles

codrops
矢印を取り入れたナビゲーションスタイルです。
スライドショー、ギャラリーに使えるエフェクト、スタイルが揃っています。

9.UI Statistic Pop Out CSS

CODEPEN
ホバーすると、パネルの色が変わり拡大表示するという動きです。
料金表、プラン一覧などを掲載する時に使えるテクニックです。

10.Pure CSS Color Tabs (no label)

CODEPEN
各色のタブをクリックすると、横方向にスライドしながら色が切り替わるアニメーションです。
見た目のインパクトがあるのはもちろん、コンテンツを見やすくする効果を得ることができます。

11.Horizontal menu with slide down on hover

CODEPEN
マウスカーソルをメニューの文字に乗せると、上からスライドしてラインが引かれるアニメーションです。
シンプルな動きで、取り入れやすくなっています。

12.Monocle List

CODEPEN
スクロールに合わせて、中央の要素が変化するユニークなリストです。
移動した位置の背景色、文字を表示するようになっています。

13.CSS background change on scroll

CODEPEN
スクロールすると、その位置のコンテンツに合わせて中央部の背景色が変わります。

サンプルのような全体に画像を使っているデザインに取り入れると、それだけで見た目をぐっと印象的にしてくれるテクニックです。

14.10 Stunning Hover Effects with SCSS

CODEPEN
CSSで表現した10種類のテキスト向けホバーエフェクトを紹介しています。
ぼんやりと広がる動きから括弧で囲むようなもの、文字に合った要素が出てくるものまで様々です。

文字をちょっと装飾したい時に便利です。

15.Scotch Digital Logo

CODEPEN
小さな四角を組み合わせて表現した文字にマウスカーソルを重ねると、文字が弾けるというユニークなエフェクトです。
弾けた文字は自動的に元の文字に戻ります。クールなデザインにぴったりな動きです。

16.CSS Cube Flip

CODEPEN
文字が入ったピンク色のキューブにマウスカーソルを乗せると、くるっと回転します。
可愛らしい動きで、ガーリーなデザインやワンポイントに重宝します。

17.Jelly Letters

CODEPEN
ゼリーのように文字がぷるるんと揺れるテキストエフェクトです。
CSSだけで実装しているとは思えないほど、スムーズでユニークな動きが素敵です。

テキストメインのデザイン、見出しデザインにこだわりたいという時に活躍します。

18.シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50

NxWorld
HTML＋CSSのみで実装可能な、見出しデザインのサンプルコードを50個まとめた記事です。
大半が複数行の見出しにも使えるシンプルなコードとなっているため、自分好みにカスタマイズしやすくなっています。

とにかく数が豊富で様々なスタイリングができますので、見ておいて損はありません。

19.Efectos Css3

CODEPEN
多種多様なエフェクトをCSS3で表現したサンプルです。
枠が現れるもの、影が出るものといった動きをつけることができます。

20.Collection of Button Hover Effects

CODEPEN
ボタンにマウスカーソルを合わせると動く、エフェクト5種類を掲載しています。
キラッと輝くもの、ボタンをぐるっと囲うものなど、どれも実践的かつシンプルで使いやすい動きですので必見です。

21.Blobs Button

CODEPEN
あまり見かけない特徴的な動きを表現できるCSSサンプルです。
枠のみデザインしてある青いボタンにマウスカーソルを合わせると、泡のようなものが出てきてボタン全体をうめつくします。

22.INSPIRATION FOR BUTTON STYLES AND EFFECTS

codrops
落ち着いたデザインに合いそうなボタンスタイル、エフェクトを掲載しています。
どれも主張しすぎない効果ばかりですので、取り入れやすい印象です。

23.Subtle Click Feedback Effects

codrops
ミニアイコンに使える、シンプルな動きのCSSサンプルです。全部で22タイプの動きを用意しています。
定番のものからちょっと個性的な動きまで収録しています。

24.Organic Button

CODEPEN
ボタンクリックから読み込み完了まで、一連の流れにアニメーションをつけるサンプルです。
シンプルなミニマルデザインで、そのままでもあらゆるホームページに使えます。

25.CSS Favorite Button

CODEPEN
ハートのボタンにマウスカーソルを乗せると、横に伸びてテキストを表示するアニメーションです。
お気に入りボタンとして使用することを想定してデザインされています。

26.Rotating Icon Buttons

CODEPEN
マウスカーソルを合わせると、イラスト入りアイコンがくるっと回転するアニメーションのサンプルコードです。
回転と同時に色、影の変化もあり、アイコンに立体感が出ます。

27.購入ボタンを押すと美しく梱包してくれる見て楽しい触って気持ちいい購入ボタンの実装

ホームページを作る人のネタ帳
まるでギフトを実際に包装しているかのような、独特な動きが実装できるサンプル紹介です。
ネットショップを運営している方にぜひオススメしたいエフェクトとなっています。

28.CSS3 Hover Effects

CODEPEN
CSS3で実装した、16種類のボタンエフェクトのサンプルです。
ボタンにマウスカーソルを合わせるとわずかな変化があり、動きのあるデザインにしてくれます。

29.CSSのみでボーダーをスタイリッシュにアニメーションさせる

Qiita
マウスオーバーで四方から線が伸びる、スタイリッシュでクールなアニメーションです。
CSSだけで手軽に実装できます。

30.Animated Hover Highlight

CODEPEN
マウスカーソルに沿って、テキストをハイライト表示してくれるエフェクトです。
CSSで動きをつけるだけで、文字だけでのデザインでもかっこよく仕上がります。

31.Creative Link Effects

codrops
クリエイティブにしてくれるリンク向けエフェクトのサンプルです。
全部で21種類を収録しています。

メニューに動きをつけたい時にぴったりです。