先日投稿した記事
CSS3でマウスオーバーすると画像がぽよんっと動くアニメーション
ですが、ぽよんっ！というアニメーションがちらついて見えてしまっていました。
原因は、画像の端のほうでマウスオーバーをした場合に、
丸が一度小さくなる際マウスオーバーの状態から外れてしまうことによって、CSSの擬似クラス:hoverに定義したアニメーションが効かなくなることによるものです。
そこでこのちらつきをなるべく簡単に改善するために
.animationにアニメーションを定義.animBallBoxという箱で丸を囲い、
箱にアニメーションクラスを追加／削除でアニメーション開始／終了
と修正することにしました。
CSS3だけでは箱Aを:hoverした際に、箱Bをアニメーションさせるということができなさそうだったので ((追記：CSS3だけでも実装可能とご指摘いただきました。次回CSS3だけでの実装を紹介させていただきます。)) 、jQueryのaddClassとremoveClassを使いました。
[BEFORE]
別ウィンドウで開く
[AFTER]
別ウィンドウで開く
特に丸の縁に近い方にマウスオーバーをしてみると、違いがよく分かるかと思います。
では、コードです。
HTML
<head>内でjQueryを読み込みます。
|
1 |
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> |
|
1 2 3 4 5 |
<div class="box"> <div class="animBallBox"> <div class="animBall"></div> </div> </div> |
.animBallBoxという大きさが固定された箱の中に、.animBallという動かす丸を入れます。
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { $('.animBallBox').hover( function(){ $('.animBall').addClass('animation'); }, function(){ $('.animBall').removeClass('animation'); } ); }) |
CSS
|
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 |
.box { width: 200px; height: 200px; position: relative; } .animBall { width: 60px; height: 60px; background-image: url(../images/sample.png); background-size: 100% 100%; } .animBallBox { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; } .animation { animation: animScale 0.4s ease-out; transform-origin: 50% 50%; -webkit-animation: animScale 0.4s ease-out; -webkit-transform-origin: 50% 50%; -moz-animation: animScale 0.4s ease-out; -moz-transform-origin: 50% 50%; } @keyframes animScale { 0% { transform: scale(0.8, 0.8); } 40% { transform: scale(1.2, 1.2); } 60% { transform: scale(1, 1); } 80% { transform: scale(1.1, 1.1); } 100% { transform: scale(1, 1); } } @-webkit-keyframes animScale { 0% { -webkit-transform: scale(0.8, 0.8); } 40% { -webkit-transform: scale(1.2, 1.2); } 60% { -webkit-transform: scale(1, 1); } 80% { -webkit-transform: scale(1.1, 1.1); } 100% { -webkit-transform: scale(1, 1); } } @-moz-keyframes animScale { 0% { -moz-transform: scale(0.8, 0.8); } 40% { -moz-transform: scale(1.2, 1.2); } 60% { -moz-transform: scale(1, 1); } 80% { -moz-transform: scale(1.1, 1.1); } 100% { -moz-transform: scale(1, 1); } } |
間違っている点などありましたら、ご指摘ください。