ホバーやクリックした際の動きを中心に、CodePenで公開されているCSSを使ってちょっとしたエフェクトやアニメーションを付けたいときに参考になりそうなデモを紹介します。いずれも目新しい感じのものではないのですが、ひと通りの動きがまとめられているデモが多めなので、エフェクトをどんな感じにするか悩むことが多い人はこういったものをメモしておくのがおすすめです。
※スマートフォンやタブレットでも確認ができないというわけではないですが、動作確認などはPC環境での閲覧推奨です。
※一部クラス付加などの動きについてJavaScriptを利用していますが、基本的な動きはいずれもCSSを用いて表現しているものになります。
いずれもCodePenで公開されているものになるので実際の動きやコードを見るだけでなく、それらをベースに自分好みに変更して動きを確認したりも容易にできます。
また、例えばクライアントなどからアニメーションを付けたいというざっくりな要望があったときなどにも、こういったものを利用することで大体のイメージをお互い認識できたりするのに利用できそうですね。
Stacked Cards Hover Effects
ホバーすると要素の位置がずれると同時に後ろの要素が表示され、カードが重ねられているような見せ方にすることができます。
後ろの要素として配置されているものは疑似要素で作成されており、表示される位置も上下左右だけでなく斜め方向や扇状などひと通り用意されています。
See the Pen Stacked Cards Hover Effects by Kyle Brumm (@kjbrum) on CodePen.
Card over view
ホバー時に上にある要素が非表示になって下の要素が表示されるという動きを様々なアニメーションで表現したものです。
フェード・スライド・フリップなど全20タイプ用意されており、カードタイプと相性が良さそうです。
See the Pen Card over view by Vineeth.TR (@vineethtr) on CodePen.
Efectos Css3
ボックスやイメージなどにホバーしたときに利用できそうなエフェクトがまとめられており、要素が浮き上がったりシャドウを表示したりなど全14タイプあります。
いずれも簡易的なものですし、少し自分で微調整した方が良さそうなものもあったりしますが、ざっくりどのようなエフェクトを指定するか確認してもらうときなどにも使えそうです。
See the Pen Efectos Css3 by Adrian (@AdriPen92) on CodePen.
Hamburger Icon Animations
ハンバーガーメニューをクリックした際の動きが12タイプまとめられており、よくある「×」に変化するタイプだけでなく、矢印に変化させたり傾けたりしたものがあります。
See the Pen Hamburger Icon Animations by Rosa (@RRoberts) on CodePen.
CSS3 Hover Effects
サークルタイプの要素と相性が良さそうなホバーエフェクトが全15タイプまとめられています。
See the Pen CSS3 Hover Effects by honglio (@honglio) on CodePen.
Line Button Hover Effects
ボタンのホバーエフェクトとしてラインをアニメーションさせるサンプルがまとめられており、2方向動くものや4方向それぞれで動くものなど全8タイプあります。
See the Pen Line Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.
Sass mixin library for text hover
テキストリンクと相性が良さそうなホバーエフェクトがまとめられており、ラインが引かれたり背景色が塗られていくようなエフェクトが多数用意されています。
どのようなエフェクトがあるのかは、ウィンドウサイズが大きい場合は画面左側のリストから、小さい場合はハンバーガーメニューをクリックで表示されるリストから確認することができ、気になるエフェクト名をクリック後に「HOVER ME」にホバーすることで確認できます。
See the Pen Sass mixin library for text hover by Antonija Simic (@tonkec) on CodePen.
Pure CSS hexagonal spinners
六角形をモチーフにしたスピナーが全18タイプあります。
全体的にdivの入れ子が激しいですが、見栄え・アニメーションともに画像は使用せずにHTMLとCSSで実装されています。
See the Pen Pure CSS hexagonal spinners by Valentin François (@valentinfrancois) on CodePen.
CSS spinners
こちらはサークルタイプのスピナーで全20タイプあり、span要素ひとつとHTMLもシンプルです。
See the Pen CSS spinners by zessx (@zessx) on CodePen.
CSS Loader
同じくサークルタイプのスピナーで全9タイプです。
See the Pen CSS Loader by Geoffrey Crofte (@CreativeJuiz) on CodePen.
CSS loaders and timing functions
同じくサークルタイプのスピナーで、こちらの場合は見栄えもシンプルですべて同じものになりますが、それぞれanimation-timing-functionの指定が違うために異なるアニメーションの感じになっています。
See the Pen CSS loaders and timing functions by joogl (@joogl) on CodePen.
Pure CSS toggle buttons
input type="checkbox"をCSSで装飾＋チェック時にアニメーション実装したものです。
See the Pen Pure CSS toggle buttons by Mauricio Allende (@mallendeo) on CodePen.
CSS Particle Effects
パーティクルエフェクトのアニメーションをCSSで表現したもので全5タイプのデモがあります。
表示されている要素ひとつひとつがspan要素になっており、見栄えの指定に加えてそれぞれ異なる位置指定やanimation-delayを設定する作りになっています。
このデモにあるようにJavaScript使ってspanを生成したり少しずつ異なるスタイルを指定していくのが無難ですが、頑張ればHTMLとCSSのみでこのような見せ方ができます。
See the Pen CSS Particle Effects by Atticus Koya (@k-ya) on CodePen.
10 stunning hover effects with scss
非対応のブラウザがあったりもするので使い所は限られますが、ユニークなホバーエフェクトが10タイプ紹介されています。
See the Pen 10 stunning hover effects with scss by Renan C. Araujo (@caraujo) on CodePen.
10 stylish hover effects with less
同じく非対応のブラウザがあるので使い所は限られてしまいますが、こちらもユニークなホバーエフェクトが10タイプ紹介されています。
See the Pen 10 stylish hover effects with less by Renan C. Araujo (@caraujo) on CodePen.
以前にもCSSを使ってエフェクトやアニメーションを付ける際に参考になるデモやテクニックをまとめており、いずれも上で紹介してきたもの以外になるので、興味ある方はこちらもご覧ください。