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