CSS アニメーション | バウンシングローダーチュートリアル

はじめに

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

バウンシングローダー

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

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

opacityとtransformプロパティを使った@keyframesアニメーションを定義し、より良いパフォーマンスのためにtransform: translate3d()で単一軸の平行移動を行います。
.bouncing-loaderクラスを持つ親コンテナを作成し、display: flexとjustify-content: centerを使ってバウンシングする円を中央に配置します。
バウンシングする円用の 3 つの<div>要素に同じwidth、height、border-radius: 50%を与えて円形にします。
3 つのバウンシングする円それぞれにbouncing-loaderアニメーションを適用します。
各円に異なる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 でさらに多くの実験を練習することができます。

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

はじめに

バウンシングローダー

まとめ