分12今回のお題は,前回に引き続きanimationプロパティを使う。transitionプロパティよりも細かくつくり込めるので,動き方を工夫し,ほかのアニメーションとも組み合わせると,魅力的な表現に仕上げられる。これからつくるのは,マウスポインタを重ねると鼓動のようにアニメーションするボタンだ(サンプル1⁠)⁠。#1」を参考にさせていただいた。FontsのOswaldを用いた(図1⁠)⁠。例によって,ベンダープレフィックスを省くため,<script>要素で-prefix-freeを読み込んである(第1回の「ベンダープレフィックスと-prefix-free」の項参照⁠)⁠。FontsのOswald<body>要素にはつぎのコード1のように,<div>要素(class属性"button")の中に<a>要素(class属性"button-item")を含め,さらにその中の<span>要素にテキストを書き加えた。</a></div><style>要素に以下のコード2のCSSを定めると,テキストを円形の縁で囲んだボタンがページに表れる(図2⁠)⁠。アニメーションはなにもない。縁は:before擬似要素で加えた。borderプロパティを与えるとともに,border-radiusプロパティの値を50%とすることで円形にしている。1em;}ボタンの円形の縁取りを鼓動のようにアニメーションさせるそれでは,ボタンの円の縁取りに鼓動のようなアニメーションを加えよう。ボタン(class属性"button")にマウスポインタが重なったとき(:hover擬似クラス),縁の:before擬似要素に,つぎのようにanimationプロパティを定める。@keyframes規則(pop)には,始まりを0%,終わりを100%とするキーフレームを任意に決めて,それぞれにプロパティを与えればよい(第10回の「五角柱を水平に回す」参照⁠)⁠。transformプロパティにscale()関数で伸縮させて,鼓動のようなアニメーションを表現した(図3⁠)⁠。ここまでのCSSの定めを以下のコード3にまとめた。