今回のお題は、水平に並べた要素に時間差で波紋のような弾けるアニメーションを加える(サンプル1)。「Smooth Pulse」のデザインとアニメーションをもとに、わかりやすく組み立て直した。アニメーションの工夫があるものの、技術的にはむずかしくない。ただ、要素の数だけアニメーションのコードが増える。jsdo.itのスペースも考え合わせて、要素の数は4つに減らした。
水平に並べた要素に静的なスタイルを割り当てる
アニメーションを加える前の、4つの要素の組み立てと静的なスタイルは、後に掲げるコード1のとおりだ。border-radius
プロパティの値を50%にして、要素は円形にした。そして、色は緑系(#33ffff)から青系(#3399ff)まで、段階的に変えている(図1)。アニメーションは、円形の<a>
要素(class
属性"circle")に加えてゆく。なお、おなじみの-prefix-freeは、CDNがあったのでそれを用いた。
並べた要素に弾けるようなアニメーションを加える
円形の<a>
要素(class
属性"circle")に加えるアニメーションは、4つで少しずつ異なる。それらをすべて羅列したのでは、共通する基本部分がわかりにくい。そこで、違うところは以下のように変数を使って示すことにした。変数nは要素の順番(1~4)だ。redとgreenおよびblueは、要素ごとの色(background
)によって決まる。そして、delay
は要素によって変えるアニメーション開始の時間差だ。あとは、すべて共通となる。
@keyframes
規則の構成は大枠として、3つの影(box-shadow
プロパティ)を3つのキーフレーム(0%と10%および100%)でアニメーション(animation
プロパティ)させることになる。ひとつめと3つめの影は同じ色で、それぞれの要素と同系色にする。ひとつめの影は要素から広がる光彩で、透明から輝きを増し、透明に戻ることで、瞬くように見せる。3つめは、大きさを広げながら強さを増し、さらに広がりつつ消えてゆく。隠し味は、ふたつめの背景色の影だ。こちらは不透明なまま、3つめの影に少し遅れて広がる。この影がふたつの間を埋めることによって、波紋のような弾けるアニメーションになった(図2)。ここまでのCSSの定めを、以下のコード2にまとめた。
ポインタが重なったときのアニメーションを加える
要素にマウスポインタが重なったときには、アニメーションを変えよう。基本は前項で加えた弾けるアニメーションと同じだ。それも、つぎのように少し簡潔になる。ポインタが重なった要素のみに与えるアニメーションだから、時間差は変えない。@keyframes
規則のキーフレームはふたつで済ませている。要素に応じて色を定めた3つの影のアニメーションは、前項と同じ考え方だ。これで、マウスポインタを重ねた要素の色とアニメーションが変わる(図3)。
細かいけれど、要素にはtransition
プロパティも加えたので、マウスポインタを重ねたときの色は滑らかに切り替わる。なお、アニメーションの時間差は、要素同士の同期はとっていない。そのため、マウスポインタを重ねてアニメーションが切り替わると、他の要素とのタイミングはずれてしまう。できあがったCSSの定めは、以下のコード3にまとめた。要素の数に加え、それぞれの:hover
擬似クラスにもアニメーションを定めたことにより、コードの行数は増えてしまった。だが、これまで解説した基本の考え方がわかれば、むずかしいことはないだろう。