はじめに
この実験では、CSSを使ってパルスエフェクトのローダーアニメーションを作成する方法を学びます。animation-delay
プロパティを使ってリズミカルなエフェクトを作成し、@keyframes
を使ってサイクルの2点でアニメーションを定義します。この実験が終わるとき、あなたはウェブページのユーザーエクスペリエンスを向上させる魅力的なアニメーションを作成する方法を十分に理解しているでしょう。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、CSSを使ってパルスエフェクトのローダーアニメーションを作成する方法を学びます。animation-delay
プロパティを使ってリズミカルなエフェクトを作成し、@keyframes
を使ってサイクルの2点でアニメーションを定義します。この実験が終わるとき、あなたはウェブページのユーザーエクスペリエンスを向上させる魅力的なアニメーションを作成する方法を十分に理解しているでしょう。
VM内には既にindex.html
とstyle.css
が用意されています。
animation-delay
プロパティを使ってパルスエフェクトのローダーアニメーションを作成するには、次の手順に従います。
@keyframes
を使って2つの<div>
要素に対するアニメーションを定義します。両方の要素の開始点(0%
)では、width
やheight
がなく、中央に配置されます。終了点(100%
)では、両方の要素のwidth
とheight
が増加し、position
が0
にリセットされます。opacity
を1
から0
に遷移させ、<div>
要素が拡大するときに消えるエフェクトを与えます。.ripple-loader
に事前に定義されたwidth
とheight
を設定します。position: relative
を使って子要素を配置します。<div>
要素にanimation-delay
を使い、各要素が異なるタイミングでアニメーションを開始するようにします。これを達成するためのHTMLとCSSコードは次の通りです。
<div class="ripple-loader">
<div></div>
<div></div>
</div>
.ripple-loader {
position: relative;
width: 64px;
height: 64px;
}
.ripple-loader div {
position: absolute;
border: 4px solid #454ade;
border-radius: 50%;
animation: ripple-loader 1s ease-out infinite;
}
.ripple-loader div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes ripple-loader {
0% {
top: 32px;
left: 32px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0;
left: 0;
width: 64px;
height: 64px;
opacity: 0;
}
}
右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。
おめでとうございます!あなたはパルスローダーの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習できます。