CSS3アニメーションでバウンスするページローダーを作成する方法
序章
このチュートリアルでは、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サイクルを完全に制御するために使用されます。 これを@keyframes
at-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);
}
}
これは、円のwidth
、height
、および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
プロパティやそのサブプロパティを使用して、アニメーション化する要素のスタイルを設定します。 このプロパティを使用して、timing
、duration
、およびその他のアニメーションの詳細を制御できます。
ここでは、次のアニメーションサブプロパティを使用しました。
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アニメーションの作成方法を聞いていただければ幸いです。
読んでくれてありがとう! このチュートリアルが役に立ち、興味をそそられた場合は、自分で試して、以下のコメントセクションでフィードバックを共有してください。