CSSだけで作るホバーエフェクトアニメーション
として前回ご紹介したものを、勉強もかねて実際に使用してみました。
CSS TransitionsとCSS Transformsを使用しているため、
Chrome, Firefox, Safari, IE 10〜の対応となります。
早速、DEMOをご覧ください。
VIEW DEMO
前回紹介したものの中から2つピックアップし、
私なりにカスタマイズしてみました。
#01 大カッコ出現アニメーション
こちらはマウスホバーをすると大カッコ[]が
内側から外側へアニメーションしながら表示されるものです。
文章中に使用するのは難しそうですが、
ナビゲーションや各セクションのタイトルなどに
使用すると良さそうです。
|
1 2 3 |
<div class="sample effect-1"> <a href="#">Chitep!</a> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.inner .effect-1 a::before, .inner .effect-1 a::after { display: inline-block; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } .inner .effect-1 a::before { margin-right: 10px; content: '['; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); } .inner .effect-1 a::after { margin-left: 10px; content: ']'; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); transform: translateX(-20px); } .inner .effect-1 a:hover::before, .inner .effect-1 a:hover::after, .inner .effect-1 a:focus::before, .inner .effect-1 a:focus::after { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); } |
擬似要素::beforeと::afterに大カッコをつけておきますが、
このときopacityは0にしています。
擬似クラス:hoverが追加された際、
transformを使用して左右に移動させながら
opacityを1にすることで、
内側から外側へふんわり表示されるアニメーションができています。
#02 背景に円が出現アニメーション
こちらはマウスホバーで
文字に半透明の円が重なって表示されるものです。
文章中や送信などのアクションが起こるボタンに
使用すると良さそうです。
|
1 2 3 |
<div class="sample effect-2"> <span><a href="#">Chitep!</a></span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.inner .effect-2 span { display: block; position: relative; } .inner .effect-2 a::before, .inner .effect-2 a::after { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; background: rgba(0, 0, 0, 0.1); border-radius: 50%; content: ''; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); } .inner .effect-2 a::after { width: 120px; height: 120px; border-width: 6px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); } .inner .effect-2 a:hover::before, .inner .effect-2 a:hover::after, .inner .effect-2 a:focus::before, .inner .effect-2 a:focus::after { opacity: 0.6; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -moz-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); } |
擬似要素::beforeと::afterにborder-radius: 50%;で
半径の異なる円を作成しておき、opacity: 0;で隠しておきます。
マウスホバーで表示される、というシンプルなものです。
円を文字の中心に持ってくるために、
文字をspanで囲みposition: relative;を指定、
円はposition: absolute;で真ん中に来るようにしています。
#03 Google Material Design風？なアニメーション
こちらは先日のGoogle I/Oで発表された
Material Designっぽさをイメージしてみました。
（スクリーンショット撮れなくてPhosohopで適当に追加した白い丸なので
実際のアニメーションをご覧ください）
|
1 2 3 |
<div class="sample effect-3"> <span><a href="#">Chitep!</a></span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
.inner .effect-3 span { display: block; position: relative; } .inner .effect-3 a::before, .inner .effect-3 a::after { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; content: ''; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); } .inner .effect-3 a::after { width: 120px; height: 120px; border-width: 6px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); } .inner .effect-3 a:hover::before, .inner .effect-3 a:hover::after, .inner .effect-3 a:focus::before, .inner .effect-3 a:focus::after { animation-duration: 0.5s; animation-name: likeGoogleMaterial; -webkit-animation-duration: 0.5s; -webkit-animation-name: likeGoogleMaterial; -moz-animation-duration: 0.5s; -moz-animation-name: likeGoogleMaterial; } @keyframes likeGoogleMaterial { 0% { opacity: 0.6; transform: translateX(-50%) translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-50%) scale(2); } } @-webkit-keyframes likeGoogleMaterial { 0% { opacity: 0.6; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); } 100% { opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) scale(2); } } @-moz-keyframes likeGoogleMaterial { 0% { opacity: 0.6; -moz-transform: translateX(-50%) translateY(-50%) scale(1); } 100% { opacity: 0; -moz-transform: translateX(-50%) translateY(-50%) scale(2); } } |
こちらは先程の#02に加えて、
Animation keyframeを用いて円が拡大しながらフェードアウトするようにしています。
IE10が早く普及してくれることを祈るばかりです。