CommentsCSSだけで作るホバーエフェクトアニメーションとして前回ご紹介したものを、勉強もかねて実際に使用してみました。10〜の対応となります。DEMOをご覧ください。私なりにカスタマイズしてみました。大カッコ出現アニメーションこちらはマウスホバーをすると大カッコ[]が内側から外側へアニメーションしながら表示されるものです。文章中に使用するのは難しそうですが、ナビゲーションや各セクションのタイトルなどに使用すると良さそうです。}擬似要素::beforeと::afterに大カッコをつけておきますが、このときopacityは0にしています。内側から外側へふんわり表示されるアニメーションができています。背景に円が出現アニメーションこちらはマウスホバーで文字に半透明の円が重なって表示されるものです。文章中や送信などのアクションが起こるボタンに使用すると良さそうです。0;で隠しておきます。マウスホバーで表示される、というシンプルなものです。absolute;で真ん中に来るようにしています。Designっぽさをイメージしてみました。keyframeを用いて円が拡大しながらフェードアウトするようにしています。IE10が早く普及してくれることを祈るばかりです。コメントをキャンセルメールアドレスが公開されることはありません。