序章

このチュートリアルでは、CSS3アニメーションキーフレームを使用してバウンスするページローダーを作成します。 読み込みページのHTMLのスタイルを設定する方法、アニメーションキーフレームを作成する方法、およびキーフレームでアニメーション遅延を使用する方法を示します。

このチュートリアルの終わりまでに作成するものは次のとおりです。

または、次のCodePenリンクを使用をクリックして、実際の例を確認してください。

https://codepen.io/MaedahBatool/pen/wZxMjZ?editors=1100

ステップ1—HTMLを書く

まず、このプロジェクトの基本的なHTMLを作成しましょう。

<p>A simple representation of an animated bouncing loader!</p>

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
</div>

loaderというclassを使用してdivを追加しました。 このdivは、すべてのページローダー要素を作成する役割を果たします。 このdiv内に、それぞれがページローダーの円を表す3つの連続したspan要素を追加しました。

ステップ2—CSSスタイルを書く

次に、基本的な要素のスタイルを設定しましょう。

/*_ OPTIONAL: Styles for the demo. *_/
body {
  background: #2C294F;
  padding: 2rem;
}

p {
  font: 1rem/1.45 "Operator Mono";
  color: #A599E9;
  text-align: center;
}

このコードブロックは、pタグとbodyのオプションのCSSスタイルを定義します。

.loaderクラスのスタイリング

次に、次のプロパティを使用してページローダーのスタイルを設定します。

/_ CSS for animated bouncing loader. _/
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
}

ここでは、 Flexbox 、つまりdisplay: flex;プロパティを使用して、バウンスするページローダーをページの中央に水平方向と垂直方向の両方に配置します。

/_ Loader circles _/
.loader > span {
  background: #FAD000;
  border-radius: 50%;
  margin: 5rem 0.5rem;
  animation: bouncingLoader 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader > span:nth-child(3) {
  animation-delay: 0.4s;
}

各ローダーサークルには、width: 1rem;height:1rem;があり、#FFB651の色になっています。 デフォルトでは、ページローダーの形状は正方形です。 円形にするには、border-radiusを50%に設定します。 次のGIFは、border-radiusプロパティがない場合のローダーの外観を示しています。 また、円の間に少しマージンを追加しました。

border-radiusを設定しない場合のスタイルを以下に示します。

ここで最も興味深い部分は、animationプロパティです。 bouncingLoaderと呼ばれるアニメーションキーフレームを使用しています。このキーフレームは0.6秒に1回実行され、無限に繰り返されます。 これとアニメーションの遅延プロパティについては、後のセクションで詳しく説明します。

ステップ3—アニメーションキーフレームを作成する

キーフレームは、アニメーションの動作を定義し、CSSアニメーションの1サイクルを完全に制御するために使用されます。 これを@keyframesat-ruleとして定義し、その後にアニメーションの名前(この場合はbouncingLoader)を付けます。

@keyframeルール内で、キーワードfromおよびtoを使用して、開始および終了点を指定します。アニメーション。 同様に、の開始点を表すfromには0% を使用し、toの終了を表す100%を使用することもできます。アニメーションのポイント。

さらに、複数のアニメーショントランジションが必要な場合は、それぞれにスタイリングセレクターのリストを含むパーセンテージの範囲を定義できます。 これらのパーセンテージは、任意の順序で、それらの間に任意の違いを付けてリストできます。 これらのパーセンテージの簡単な表現を以下に示します。

@keyframes animationNameHere {
  0% { opacity: 1; }
  30% { opacity: 0.75; }
  50% { opacity: 0.5; }
  100% { opacity: 0.25; }
}

次に、バウンスするページローダーを作成するためのキーフレームのコードを記述します。

/_ Define the animation called bouncingLoader. _/
@keyframes bouncingLoader {
  from {
    width: 0.1rem;
    height: 0.1rem;
    opacity: 1;
    transform: translate3d(0);
  }
  to {
    width: 1rem;
    height: 1rem;
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}

これは、円のwidthheight、およびopacityの基本的なスタイリングプロパティを定義する、キーワードfromおよびtoを使用します。 それ以外に、バウンス効果を作成するには、CSS transformプロパティを使用して特定の要素の座標を変更し、各円の位置を変換しました。

このtransformプロパティでは、 3入力を使用して(x, y, z)座標の変更を説明するtranslate3D()関数を使用しました。 ローダーをwaveモーションで実行したかったので、xとzを維持しながら、主に y axisに沿って移動する必要があります。 ]-軸定数。 したがって、終点の値は(0, -1rem, 0)です。

このプロパティで遊ぶ方法のデモを示しましょう。 終点の値をtransform: translate3d(1rem, 0rem, 1rem);に設定すると、y軸を一定に保ちながら、x軸とz軸に沿って変換していることを意味します。 これで、アニメーションは次のようになります。

キーフレームでのアニメーション遅延の使用

最後の部分が始まります。 @keyframeのコードを記述したので、それをセットアップして実行します。 以前のGIFで表示している種類のアニメーションは、次の数行のコードで可能になりました。

/_ Loader circles _/
.loader > span {
  background: #FAD000;
  border-radius: 50%;
  margin: 5rem 0.5rem;
  animation: bouncingLoader 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader > span:nth-child(3) {
  animation-delay: 0.4s;
}

animationプロパティやそのサブプロパティを使用して、アニメーション化する要素のスタイルを設定します。 このプロパティを使用して、timingduration、およびその他のアニメーションの詳細を制御できます。

ここでは、次のアニメーションサブプロパティを使用しました。

animation: animation-name, animation-duration, animation-iteration-count, animation-direction;
  • animation-name:アニメーションの名前を定義します。私の場合はloaderです。
  • animation-duration:アニメーションが1サイクルを完了するのにかかる時間を設定します。
  • animation-iteration-count:アニメーションサイクルが停止するまでに再生する回数を示します。
  • animation-direction:アニメーションを再生する方向を定義します。

これらとは別に、他にもいくつかのサブプロパティがあります。 これらは、Mozilla WebDocsを参照できます。

これらに基づいて、あなたは私のアニメーションを次のように定義しました:

animation: bouncingLoader 0.6s infinite alternate;

このコード行は、次の3つのことを行います。

  • loader要素にキーフレームbouncingLoaderを使用するように指示します。

  • アニメーションの長さを0.6秒に設定します。

  • アニメーションを無限に実行します。

  • 1サイクルが完了すると、アニメーションの方向alternates、つまり反転します。

バウンスローダーのfirstサークルに対してこれらのプロパティを定義しました。 2番目(2)と 3番目(3)の円をターゲットにするには、nth-child(n)セレクターを使用しました。これにより、1つ以上を選択してターゲットにできます。親のnth-childである要素。 さらに、残りのspan要素については、animation-delayを定義したばかりなので、各要素が同時にアニメーション化を開始することはありません。

最終製品

このアニメーション化されたバウンスページローダーの完全なコードは次のとおりです。

HTMLコード

<!-- HTML for Bouncing Page Loader -->
<p>A simple representation of an animated bouncing page loader!</p>

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
</div>

CSSコード

/_ CSS for animated bouncing loader. _/
.loader {
  display: flex;
  justify-content: center;
    align-items: center;
}

/_ Loader circles _/
.loader > span {
  background: #FAD000;
  border-radius: 50%;
  margin: 5rem 0.5rem;
  animation: bouncingLoader 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader > span:nth-child(3) {
  animation-delay: 0.4s;
}

/_ Define the animation called bouncingLoader. _/
@keyframes bouncingLoader {
  from {
    width: 0.1rem;
    height: 0.1rem;
    opacity: 1;
    transform: translate3d(0);
  }
  to {
    width: 1rem;
    height: 1rem;
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}

/_ OPTIONAL: Styles for the demo. _/
body {
  background: #2C294F;
  padding: 2rem;
}

p {
  font: 1rem/1.45 "Operator Mono";
  color: #A599E9;
  text-align: center;
}

これは、CodePenを使用したデモです。

このペンをフォークして、自分で試してみることができます。

https://codepen.io/MaedahBatool/pen/wZxMjZ?editors=1100

あなたの番

このアニメーションを開発した後、CSSは驚くほど強力であることが示されています。 このようなアニメーションを作成するには、いくつかの方法があります。 あなたの提案とCSSアニメーションの作成方法を聞いていただければ幸いです。

読んでくれてありがとう! このチュートリアルが役に立ち、興味をそそられた場合は、自分で試して、以下のコメントセクションでフィードバックを共有してください。