CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15

  • Posted on
  • Category : Tips
CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15

ホバーやクリックした際の動きを中心に、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の指定が違うために異なるアニメーションの感じになっています。

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を使ってエフェクトやアニメーションを付ける際に参考になるデモやテクニックをまとめており、いずれも上で紹介してきたもの以外になるので、興味ある方はこちらもご覧ください。

Back to Top

CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15

CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。