【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には親要素の中に
子要素である「３つの空のdivのブロック」を並べておきます。
これをCSSで３つの黒いまるにデザインしていきます。

classとはセレクタを独自のタグで指定できるものです。

CSSをご覧ください！

See the Pen Untitled by Palm7710 (@palm7710) on CodePen.

親要素「.three-dot-spinner」のtext-align: center;とは
要素を真ん中（center）に配置するものです！

その親要素の中にある子要素「.three-dot-spinner div」とは
子要素の全てを指定して形を整えるものとなっています。

• 一番下のborder-radius: 50%;で
  「まる」を実現することができます。

display: inline-block;は
まだ深く理解できていないので、
説明すると難しいですが、

このプロパティは、
行の中で一緒に並ぶいくつかの小さなボックスやボタンを
デザインする時に特に便利です。

「インライン」と「ブロック」が合わさっていて、

• 他の要素と同じ行に並ぶ（「インライン」という性質）
• 幅と高さを指定できる（「ブロック」要素の特徴）

少し難しいですが、
このようなことが可能になります！

黒い点を動かしてみる

See the Pen Untitled by Palm7710 (@palm7710) on CodePen.

子要素「.three-dot-spinner div」の中に、
animationプロパティをセットします。

• sk-bouncedelay: これは使用するアニメーションの名前（タグ）です。
• 1.4s: アニメーションの一周期の長さを指定します。
• infinite: アニメーションが無限に繰り返されます。

このCSSコードは@keyframesルールを使用して、
アニメーションのキーフレーム使っています！

• 0%: アニメーションの開始時（0%）で、
  transform: scale(0);が適用され、
  要素は完全に縮小されて見えなくなります。
• 40%: アニメーションが40%の進行度に達すると、
  transform: scale(1);が適用されます。
• 80%: アニメーションが80%進むと、
  再び要素は縮小して見えなくなります。
• 100%: アニメーションの終了時（100%）でも、
  要素は縮小された状態（scale(0)）で終わります。

より滑らかに動かす

このCSSコードは、
アニメーション遅延を設定して、
.three-dot-spinnerクラス内の特定の
子要素（.bounce1と.bounce2）に
異なるタイミングでアニメーションを開始させるためのものです。

アニメーションにリズムや動的な効果が生まれます！！

See the Pen loader_03 by Palm7710 (@palm7710) on CodePen.

• .three-dot-spinner .bounce1で
  アニメーションが通常開始する時から
  0.32秒早く開始するよう指定しています。
• .three-dot-spinner .bounce2で
  通常時刻より0.16秒早く開始します。

この遅延の差により、
それぞれ異なるタイミングでアニメーションが開始され、
動的な「アニメーション」を作ることができます！！

まとめ

今回は簡単なアニメーションを作ってみました！

CSSを学び直していると
まだまだ知らないことや、発見が多いです。

これからも精進していきますので
暖かい目で見守っていてください🙇‍♀️

最後まで読んでいただきありがとうございました！

Palm

東京通信大学3年生

XContact

私はpalm(ぱるむ）です。お花や自然が大好きです。専門学校でWeb開発を学び、東京通信大学に編入しました。得意分野は、ウェブ開発（フロントエンド、バックエンド）や機械学習（自然言語、データ分析）です。趣味で色々デモ開発をしています。