今回のお題は、前回に引き続きanimation
プロパティを使う。transition
プロパティよりも細かくつくり込めるので、動き方を工夫し、ほかのアニメーションとも組み合わせると、魅力的な表現に仕上げられる。これからつくるのは、マウスポインタを重ねると鼓動のようにアニメーションするボタンだ(サンプル1)。デザインと動きは「Social button effects #1」を参考にさせていただいた。
円形の縁取りを与えたボタン
ボタンのテキストのフォントには、Google FontsのOswaldを用いた(図1)。また例によって、ベンダープレフィックスを省くため、<script>
要素で-prefix-freeを読み込んである(第1回の「ベンダープレフィックスと-prefix-free」の項参照)。
<body>
要素にはつぎのコード1のように、<div>
要素(class
属性"button")の中に<a>
要素(class
属性"button-item")を含め、さらにその中の<span>
要素にテキストを書き加えた。
<style>
要素に以下のコード2のCSSを定めると、テキストを円形の縁で囲んだボタンがページに表れる(図2)。まだ、アニメーションはなにもない。縁は:before
擬似要素で加えた。border
プロパティを与えるとともに、border-radius
プロパティの値を50%とすることで円形にしている。
ボタンの円形の縁取りを鼓動のようにアニメーションさせる
それでは、ボタンの円の縁取りに鼓動のようなアニメーションを加えよう。ボタン(class
属性"button")にマウスポインタが重なったとき(:hover
擬似クラス)
、縁の:before
擬似要素に、つぎのようにanimation
プロパティを定める。@keyframes
規則(pop)には、始まりを0%、終わりを100%とするキーフレームを任意に決めて、それぞれにプロパティを与えればよい(第10回の「五角柱を水平に回す」参照)。transform
プロパティにscale()
関数で伸縮させて、鼓動のようなアニメーションを表現した(図3)。ひとまず、ここまでのCSSの定めを以下のコード3にまとめた。
塗りの円を中心から広げてアニメーションさせる
:after
擬似要素でもうひとつ塗りの円を加える。線が塗りになるほかは、:before
と同じ初期設定だ。それを、transform
プロパティにscale()
関数で小さく縮めておく(図4)。マウスポインタを重ねたら、塗りの円が広がるアニメーションにしよう。
塗りの円の:after
擬似要素にanimation
プロパティで、つぎのように別の@keyframes
規則(pulse)を与えた。また、始めのopacity
プロパティは0にしておく。アニメーションには伸縮に加え、不透明度(opacity
プロパティ)も変えている。これで、ボタンにマウスポインタを重ねると、塗りの円も中心から広がって伸縮する(図5)。なお、animation-fill-mode
プロパティをforwards
にすると、アニメーションが終わってもそのまま、もとの表示には戻らない。
さらに、ボタンの中のテキスト(<span>
要素)にも、transition
プロパティでつぎのようにちょっとしたアニメーションを加える。マウスポインタを重ねると、文字の色が白になり、浮くように少し上に動く。なお、テキストが塗りの円の裏に隠れないよう、z-index
プロパティを定めた。
これでボタンにマウスポインタを重ねると、円の縁と塗りが鼓動のようにアニメーションするようになった。テキストも少し浮き上がって白抜きに変わる。@keyframes
規則のキーフレームの定めが細かいとはいえ、設定そのものはさほどむずかしくないだろう。また、円の縁と塗りで異なるアニメーションを組み合わせたことにより、表現力が増した。書き上げたCSSの定めは、つぎのコード4にまとめたとおりだ。