ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ

Tips

ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ

既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。
そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。
一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。

※スマートフォンやタブレットでも確認ができないというわけではないですが、動作確認などはPC環境での閲覧推奨です。

image hover 63 effects

イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。
HTMLもシンプルでエフェクトはすべてCSSで実装されています。

See the Pen image hover 63 effects by Mahesh (@maheshambure21) on CodePen.

Css3 Transform

rotatescaletranslateといった、CSSのtransformを利用した際にそれぞれどのような動きになるのかが一覧化されているものです。
未だにどのように記述するとどう動いたり変化するのかがピンとこないという人にわかりやすいと思います。

See the Pen Css3 Transform by Vineeth.TR (@vineethtr) on CodePen.

Animated dial buttons

クリックでサークル状に展開するナビゲーションを実装したもので、フル・ハーフ・右上・左下など全10パターンあります。

See the Pen Animated dial buttons by jh3y (@jh3y) on CodePen.

Pure CSS Header Menu

JavaScriptは使用せずに、開閉のスイッチに<input type="checkbox">を、表示のアニメーションにはtransformtransitionを使用する形でメニューを実装したものです。

See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.

Switcher styles collection

<input type="checkbox"><label> を組み合わせて作成したスイッチスタイルをまとめているもので、動きも見た目もすべてCSSで表現しています。

See the Pen Switcher styles collection by Imagine Alex (@ImagineAlex) on CodePen.

Some More Inspiration for Text Input Effects | Codrops

フォーム入力時にラベルやフィールドに何かアニメーションを加えたいという時に参考になるエントリーです。
シンプルな動きだけでなくちょっと遊び心あるような動きのものまで様々です。

Some More Inspiration for Text Input Effects | Codrops

Awesome input focus effects - Usingcss3

同じく入力フォームのフィールドフォーカス時に何かアニメーションを加えたいという時に参考になるエントリーで、こちらは全体的にシンプルなものになります。

Awesome input focus effects - Usingcss3

Text input love

こちらもラベルやフィールドにアニメーションを加えたものです。

See the Pen Text input love by Michael Arestad (@MichaelArestad) on CodePen.

Modal Animations

animationtransformを利用してモーダル表示のアニメーションを実装したものです。

See the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.

Building Full Screen CSS3 Menus with Tons of Creative Demos | Scotch

transformtransitionといったCSSを利用してメニュー表示アニメーションを実装するチュートリアルです。
classの追加・削除でJavaScriptを利用してはいますが、表示する際のエフェクトなどはCSSを使用しており、フリップ・パララックス・フルスクリーン・スケールなど全24種類です。

Building Full Screen CSS3 Menus with Tons of Creative Demos | Scotch

Inspiration for Button Styles and Effects | Codrops

ボタンのホバーエフェクトがまとめられており、シンプルなものから少し変わったものまで様々なエフェクトがあります。
サンプルもボタンの感じや背景カラーが異なるパターンで複数用意されているので、設置したいサイトでのイメージも浮かべやすいと思います。

Inspiration for Button Styles and Effects | Codrops

Button Hover Effects

同じくボタンホバー時のエフェクトが全13種類あります。

See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.

Collection of Cool Button Hover Effects

一部ボタンと呼ぶべきか悩むものもありますが、こちらもホバー時のエフェクトがまとめられているデモで全11種類あります。

Inspiration for Line Menu Styles | Codrops

メニュー要素でのホバーエフェクトやカレント時のスタイルでラインアニメーションを利用しているサンプルが多数あります。
クールでカッコいいエフェクトが多くて、グローバルナビゲーションやタブメニュー部分などいろいろな場面で使えそうです。

Inspiration for Line Menu Styles | Codrops

Gradient Background Animation

アニメーションするグラデーション背景をCSSで実装してみたサンプルです。

SpinKit | Simple CSS Spinners

ローディング表示などで使用できるスピナーの動きをCSSで実装しているサンプルで全11種類あります。
全体的にHTMLもシンプルで、実装コードは各デモ上に表示されている「Source」をクリックすると確認できます。

SpinKit | Simple CSS Spinners

Single Element CSS Spinners

同じくCSSを使って動きと見た目を表現したスピナーで、こちらは全8種類ですがHTMLはすべてdiv要素ひとつで実装されています。

Single Element CSS Spinners

Single Element Spinner

こちらもHTMLはdiv要素ひとつで、見た目や動きはCSSで表現されているシンプルなサークルタイプのスピナーです。

See the Pen Single Element Spinner by jonginwon (@jonginwon) on CodePen.

Loader a Day (day 17)

動きが特徴的なローディングアニメーションです。

See the Pen Loader a Day (day 17) by Reinier Kaper (@TheDutchCoder) on CodePen.

Pure CSS - Simple Slider

JavaScriptは使用せずにHTMLとCSSだけでシンプルなスライダーを実装したものです。
切り替え用のバレットは<input type="radio">が使用されており、アニメーションは間接セレクタやtransformを用いて実装されています。

See the Pen Pure CSS - Simple Slider by ari (@tari) on CodePen.


以上、エフェクトやアニメーションを付けたい時に参考になりそうなCSSテクニックのまとめでした。
こういったものは探せば他にもまだまだ沢山出てきますが紹介しだすとキリがないとも思ったので、今回は全体的にサンプルやデモが複数あるものやまとまっているもので且つ使用頻度が高そうなホバーやフォーカス時の動きを中心に紹介してみました。

紹介しているものでCodePenで公開されているのはソースを見るだけでなくいじってみたりするのも容易ですし、その他もサンプル用ソースをダウンロードできるのがほとんどなので、自分でいろいろといじったりしてみると勉強になったり、もっと面白いエフェクトやアニメーションを見つけられたりもできそうですね。

ちなみに、当ブログでも上で紹介してきたものと同じような主にCSSを利用してちょっとしたエフェクトやアニメーションを実装したサンプルを幾つか紹介しているので、興味ある方はこちらもご覧になってみてください。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.