今回はマウスオーバーすると、ぽよんっ!ぽよよんっ!と動くものをjQueryではなく、CSS3のアニメーションを使ってつくってみたいと思います。DEMO別ウィンドウで開く上の丸にマウスオーバーしてみてください。ぽよんっ!では、さっそく作り方です。動かす画像を用意します。今回はこの丸をぽよんっ!とさせます。class="animBall"></div></div>div.boxは真ん中に表示させるために囲んでいるだけなので必須ではないです。div.animBallが今回動かすボールを入れる箱となります。せいで、長くて少しうわーってなってしまいそうなので、ラフに少しだけ解説をしてみます。ease-out;ここには、アニメーションをどんな風にしてほしいか書いてあります。「animScaleっていうのを使って、0.4秒間で実行してね!動きはease-outな感じでお願いします!」と注文しています。animScaleの中に、動きを書いていきます。n%後の状態を表しています。0.16s)その指定した時間における状態をCSSで書いてあげると、それに間に合うように「あっ大きくならなきゃ!」「今度は小さく!!」というようにぽよぽよします。アニメーションさせしたいときは、ぜひ使ってみてください。何か間違っている点などありましたら、ご指摘ください!こちらを参考にさせていだきました。コメントをキャンセルメールアドレスが公開されることはありません。