CSSでアニメーションを作成すると、サイトにダイナミックな見せ方を加えることができます。今回は「fallingLine」という名前でアニメーションを実装します。このアニメーションは、線が画面の中央から下方に滑り落ちながらフェードアウトする動きです。
fallingLineの動きの概要
「fallingLine」の動きは以下のフローで実現します。
- 初期は画面の上方に展開されない状態で始まる。
- 画面の中央にラインが出現し、横に薄い線が現れる。
- 下方に滑り落ちて、最後にフェードアウトする。
See the Pen fallingLine by masakazuimai (@masakazuimai) on CodePen.
fallingLineのポイント
- 動きの現出
height: 0;で初期状態をせき済まし、top: 100px;で画面の上方から開始します。
- ラインの展開
30%で高さを増やし、opacity: 1;にして視覚化を実現します。
- ラインの消え方
100%で、再びheight: 0;に戻して消えていくようにします。
実装例のビジュアルイメージ
fallingLineは下方に滑り落ちていくモーションを発生させるコンテンツです。ラインのフェード効果で動きにメリハリを持たせることができます。これは、モダンデザインやイントロアニメーションに最適な動きです。
おわりに
fallingLineは簡単なCSSで実装可能なアニメーションです。このアニメーションはサイトのデザインを倍増させるだけでなく、視観者の気を引きつける力があります。
あなたのプロジェクトにも是非試してみてください。