【CSSアニメーション】ローダーを作ってみる
こんにちは、東京通信大学のPalmです!
最近フロントエンドを勉強していて
CSSでのアニメーションを習得中なので
これについて今日は書こうかと思っています!
簡単なローダーを作っていきます!
https://tobiasahlin.com/spinkit/
このサイトを参考にしたので、
よかったら覗いてみてください👀🌟
CSSとは
CSS(Cascading Style Sheets)は、
ウェブページのデザインを定義するための言語です!!
マークアップ言語で
構造を定義した後、
CSSを使ってその見た目やレイアウトを指定します。
CSSコードは、一般に下のような要素から成り立っています!!
セレクタ {
プロパティ: 値;
プロパティ: 値;
}
例えば、下のCSSコードは、
HTML文書のすべてのh1
タグに対して、
文字色を青にし、
フォントサイズを24ピクセルにするものです。
h1 {
color: blue;
font-size: 24px;
}
このようにCSSを使うことで、
ウェブページの見た目を統一し、
整えることができるのです!
黒い丸い点を横一列並ばせてみる
HTMLには親要素の中に
子要素である「3つの空のdivのブロック」を並べておきます。
これをCSSで3つの黒いまるにデザインしていきます。
classとはセレクタを独自のタグで指定できるものです。
CSSをご覧ください!
See the Pen Untitled by Palm7710 (@palm7710) on CodePen.
親要素「.three-dot-spinner」のtext-align: center;とは
要素を真ん中(center)に配置するものです!
その親要素の中にある子要素「.three-dot-spinner div」とは
子要素の全てを指定して形を整えるものとなっています。
display: inline-block;は
まだ深く理解できていないので、
説明すると難しいですが、
このプロパティは、
行の中で一緒に並ぶいくつかの小さなボックスやボタンを
デザインする時に特に便利です。
「インライン」と「ブロック」が合わさっていて、
少し難しいですが、
このようなことが可能になります!
黒い点を動かしてみる
See the Pen Untitled by Palm7710 (@palm7710) on CodePen.
子要素「.three-dot-spinner div」の中に、
animationプロパティをセットします。
このCSSコードは@keyframes
ルールを使用して、
アニメーションのキーフレーム使っています!
より滑らかに動かす
このCSSコードは、
アニメーション遅延を設定して、.three-dot-spinner
クラス内の特定の
子要素(.bounce1
と.bounce2
)に
異なるタイミングでアニメーションを開始させるためのものです。
アニメーションにリズムや動的な効果が生まれます!!
See the Pen loader_03 by Palm7710 (@palm7710) on CodePen.
この遅延の差により、
それぞれ異なるタイミングでアニメーションが開始され、
動的な「アニメーション」を作ることができます!!
まとめ
今回は簡単なアニメーションを作ってみました!
CSSを学び直していると
まだまだ知らないことや、発見が多いです。
これからも精進していきますので
暖かい目で見守っていてください🙇♀️
最後まで読んでいただきありがとうございました!