既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざ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
rotate・scale・translateといった、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">を、表示のアニメーションにはtransformとtransitionを使用する形でメニューを実装したものです。
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
フォーム入力時にラベルやフィールドに何かアニメーションを加えたいという時に参考になるエントリーです。
シンプルな動きだけでなくちょっと遊び心あるような動きのものまで様々です。
Awesome input focus effects – Usingcss3
同じく入力フォームのフィールドフォーカス時に何かアニメーションを加えたいという時に参考になるエントリーで、こちらは全体的にシンプルなものになります。
Text input love
こちらもラベルやフィールドにアニメーションを加えたものです。
See the Pen Text input love by Michael Arestad (@MichaelArestad) on CodePen.
Modal Animations
animationやtransformを利用してモーダル表示のアニメーションを実装したものです。
See the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.
Building Full Screen CSS3 Menus with Tons of Creative Demos | Scotch
transformやtransitionといったCSSを利用してメニュー表示アニメーションを実装するチュートリアルです。
classの追加・削除でJavaScriptを利用してはいますが、表示する際のエフェクトなどはCSSを使用しており、フリップ・パララックス・フルスクリーン・スケールなど全24種類です。
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種類あります。
See the Pen Collection of Cool Button Hover Effects by Carlos1162 (@Carlos1162) on CodePen.
Inspiration for Line Menu Styles | Codrops
メニュー要素でのホバーエフェクトやカレント時のスタイルでラインアニメーションを利用しているサンプルが多数あります。
クールでカッコいいエフェクトが多くて、グローバルナビゲーションやタブメニュー部分などいろいろな場面で使えそうです。
Gradient Background Animation
アニメーションするグラデーション背景をCSSで実装してみたサンプルです。
See the Pen Gradient Background Animation by Naoya (@nxworld) on CodePen.
SpinKit | Simple CSS Spinners
ローディング表示などで使用できるスピナーの動きをCSSで実装しているサンプルで全11種類あります。
全体的にHTMLもシンプルで、実装コードは各デモ上に表示されている「Source」をクリックすると確認できます。
Single Element CSS Spinners
同じくCSSを使って動きと見た目を表現したスピナーで、こちらは全8種類ですがHTMLはすべてdiv要素ひとつで実装されています。
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を利用してちょっとしたエフェクトやアニメーションを実装したサンプルを幾つか紹介しているので、興味ある方はこちらもご覧になってみてください。