単なる横並びのボックスも、アニメーションを少しつけるだけで目を引くものになります。スマートフォンやモダンブラウザのみがターゲットとなりますが、表示する時に順々にふんわりとしたアニメーションをつけて表示するサンプルをCSSのみで作ってみました。CSS3 の animation プロパティを使用しているので、ベンダープレフィックスやキーフレームなども合わせるとコードが沢山になってしまいます。そこで、Sass を利用して簡単に書く方法も合わせてご紹介します。
情報源: [CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る ｜ memocarilog
関連