CSS のバウンシングアニメーションローダー

はじめに

この実験では、バウンシングローダーアニメーションを作成することでCSSアニメーションの世界を探ります。この実験は、@keyframesを使ってアニメーションを定義する方法、CSSを使って要素にアニメーションを適用する方法、およびアニメーションのタイミングと方向を制御する方法を理解するのに役立ちます。この実験が終わるとき、CSSを使って魅力的でダイナミックなアニメーションを作成する方法をより深く理解しているでしょう。

バウンシングローダー

VM内には既にindex.htmlとstyle.cssが用意されています。

バウンシングローダーアニメーションを作成するには：

1. opacityとtransformプロパティを使った@keyframesアニメーションを定義し、より良いパフォーマンスのためにtransform: translate3d()で単一軸の平行移動を行います。
2. .bouncing-loaderクラスを持つ親コンテナを作成し、display: flexとjustify-content: centerを使ってバウンシングする円を中央に配置します。
3. バウンシングする円用の3つの<div>要素に同じwidth、height、border-radius: 50%を与えて円形にします。
4. 3つのバウンシングする円それぞれにbouncing-loaderアニメーションを適用します。
5. 各円に異なるanimation-delayを使い、animation-direction: alternateを使って適切な効果を作成します。

以下がHTMLコードです：

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

以下がCSSコードです：

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -16px, 0);
  }
}

.bouncing-loader {
  display: flex;
  justify-content: center;
}

.bouncing-loader > div {
  width: 16px;
  height: 16px;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}

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

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

右下隅の「Go Live」をクリックして8080番ポートでウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはバウンシングローダーの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。