パルスエフェクトのローダーアニメーションを作成する | CSS ウェブ開発

はじめに

この実験では、CSSを使ってパルスエフェクトのローダーアニメーションを作成する方法を学びます。animation-delayプロパティを使ってリズミカルなエフェクトを作成し、@keyframesを使ってサイクルの2点でアニメーションを定義します。この実験が終わるとき、あなたはウェブページのユーザーエクスペリエンスを向上させる魅力的なアニメーションを作成する方法を十分に理解しているでしょう。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/DynamicStylingGroup -.-> css/animations("Animations") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/colors -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/borders -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/width_and_height -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/positioning -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/pseudo_classes -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/animations -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/mixins -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} end

パルスローダー

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を使って子要素を配置します。
2番目の<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でさらに多くの実験を練習できます。