jQueryで簡単に実装できることもあり
どんどんどんどん多様化しているマウスオーバー時のアクションですが、
今回はマウスオーバーすると、ぽよんっ！ぽよよんっ！と動くものを
jQueryではなく、CSS3のアニメーションを使ってつくってみたいと思います。
DEMO
別ウィンドウで開く
上の丸にマウスオーバーしてみてください。
ぽよんっ！
では、さっそく作り方です。
まずは動かす画像を用意します。
今回はこの丸をぽよんっ！とさせます。
HTML
|
1 2 3 |
<div class="box"> <div class="animBall"></div> </div> |
div.boxは真ん中に表示させるために
囲んでいるだけなので必須ではないです。
div.animBallが今回動かすボールを入れる箱となります。
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 |
.box { width: 200px; height: 200px; position: relative; } .animBall { position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; width: 60px; height: 60px; background-image: url(../images/sample.png); background-size: 100% 100%; } // マウスオーバーしたときの動作 .animBall:hover { 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); } } |
ベンダープレフィックス ((-webkit-や-moz-など拡張機能であることを明示するための識別子)) のせいで、長くて少しうわーってなってしまいそうなので、ラフに少しだけ解説をしてみます。
animation: animScale 0.4s ease-out;
ここには、アニメーションをどんな風にしてほしいか書いてあります。
今回の場合は、
「animScaleっていうのを使って、0.4秒間で実行してね！動きはease-outな感じでお願いします！」
と注文しています。
「そんなこと言われても、animScaleって何なのサ？」ということで、
@keyframes animScale
の中に、動きを書いていきます。
見た目から想像出来るかと思いますが、
0%, 40%, …というのは、先ほど指定した時間（今回は0.4s）× n％後の状態を表しています。
（ex: 0.4s × 40%(0.4) = 0.16s）
その指定した時間における状態をCSSで書いてあげると、それに間に合うように「あっ大きくならなきゃ！」「今度は小さく！！」というようにぽよぽよします。
ぽよぽよアニメーションさせしたいときは、ぜひ使ってみてください。
何か間違っている点などありましたら、ご指摘ください！
こちらを参考にさせていだきました。