第16回 並んで弾けるアニメーション | gihyo.jp今回のお題は、水平に並べた要素に時間差で波紋のような弾けるアニメーションを加える（サンプル1）。「Smooth Pulse」のデザインとアニメーションをもとに、わかりやすく組み立て直した。アニメーションの工夫があるものの、技術的にはむずかしくない。ただ、要素の数だけアニメーションのコードが増える。jsdo.itのスペースも考え合わせて、要素の数は4つに減らした。 サンプル1 CSS3: Smooth Pulse 水平に並べた要素に静的なスタイルを割り当てる アニメーションを加える前の、4つの要素の組み立てと静的なスタイルは、後に掲げるコード1のとおりだ。border-radiusプロパティの値を50%にして、要素は円形にした。そして、色は緑系（#33ffff）から青系（#3399ff）まで、段階的に変えている（図1）。アニメーションは、円形の<a>要素（class属性"circl
