分12今回のお題は,ボタンのアニメーションだ。マウスポインタを重ねると,周囲が勢いよく回る(サンプル1⁠)⁠。Test」のデザインとアニメーションをもとに,コードは絞り込んでわかりやすく組み立て直した。animationプロパティで細かい動きをつくり込んでいる。Spinnerボタンをつくる要素と静的なスタイルHTMLドキュメントの<body>要素に加えるボタンをつくる要素の記述と,アニメーションを与える前の静的なスタイルはコード1のとおりだ(図1⁠)⁠。FontsのRalewayを使っている。,<script>要素に-prefix-freeを読み込んで,ベンダープレフィックスは省いた(第1回の「ベンダープレフィックスと-prefix-free」の項参照⁠)⁠。src="lib/prefixfree.min.js"></script>ボタンにマウスポインタが重なったときのアニメーションボタンにマウスポインタが重なったときの基本的なアニメーションを加えよう。ボタンの縁として見える大もとの要素(class属性"circle")は,以下のようにはじめ背景と同じ色(steelblue)にしておき,:hover擬似クラスで白に変える。内側(class属性"label")は背景色を明るい青(lightsteelblue)に,テキストは白にした。アニメーションはtransitionプロパティで定めている。ボタンの縁には待ち時間を加えたので,少しためてから動き始める。ease-in-out;}これで,ボタンにマウスポインタを重ねると,内側の色が明るく変わりテキストは白くなる。白い縁が広がるように表れる(図2⁠)⁠。スタイルの定めは以下にコード2としてまとめた。