[CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る

単なる横並びのボックスも、アニメーションを少しつけるだけで目を引くものになります。スマートフォンやモダンブラウザのみがターゲットとなりますが、表示する時に順々にふんわりとしたアニメーションをつけて表示するサンプルをCSSのみで作ってみました。 CSS3 の animation プロパティを使用しているので、ベンダープレフィックスやキーフレームなども合わせるとコードが沢山になってしまいます。そこで、Sass を利用して簡単に書く方法も合わせてご紹介します。 完成サンプル 下のサンプルが完成形となります。「Return」をクリックするとアニメーションを再度開始します。 See the Pen 順にフワッと表示するCSS by Saomocari (@Saomocari) on CodePen. HTML コード HTML コードはシンプルなリストになります。順番に表示する要素が li になるの

[ryo0821]

かわいい

[okumuraa1]

ありがとうございますm(_ _)m

[idr_zz]

ページを開いた時にオブジェクトが時間差でフワンフワンと現れるアニメ [CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る ｜ memocarilog