CSS Web ページの読み込みアニメーション: さまざまなクールな読み込みアニメーション効果を作成します。

ユーザーが Web ページにアクセスするとき、最も待ち遠しいのはページが読み込まれるのを待つことです。ユーザーの不安を軽減するために、多くの Web サイトでは CSS 読み込みアニメーションを使用して、ページの読み込みをより面白くし始めています。この記事では、CSS を使用してさまざまなクールな読み込みアニメーション効果を作成する方法を学び、その実装に役立つ具体的なコード例を示します。

1. 基本的なアニメーション

まず、基本的な読み込みアニメーションを作成しましょう。 CSS のアニメーション プロパティを使用して、基本的なアニメーションを作成できます。アニメーション プロパティには、次のようないくつかのサブプロパティがあります。

• animation-name: 適用するキーフレーム ルールの名前を選択します。
• animation-duration: サイクルの継続時間を定義します (秒またはミリ秒単位)。
• animation-timing-function: サイクル速度曲線を定義します。
• アニメーション遅延: サイクルの遅延時間を定義します。
• animation-iteration-count: アニメーションを再生する回数を定義します。

次に、いくつかの異なるタイプの基本的な読み込みアニメーションを見てみましょう。

1. 回転アニメーション

この読み込みアニメーションでは、次のコードを使用して回転キーフレームを定義します:

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

上記のコードは、@keyframes ルールを使用して A を定義します。 「回転」という名前のキーフレーム。このキーフレームでは、transform アトリビュートを使用して回転を定義します。 from と to では、回転角度を 0 度から 360 度まで定義します。

次に、「loader」要素にこのアニメーションを指定する必要があります:

.loader {
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. Flash アニメーション

この読み込みアニメーションでは、次のコードを使用して定義します。周期的に点滅するキーフレーム:

@keyframes blink {
  50% {
    opacity: 0.5;
  }
}

上記のコードは、@keyframes ルールを使用して「blink」という名前のキーフレームを定義します。このキーフレームでは、不透明度プロパティを使用して要素の透明度を定義します。 50% では、これを 0.5 に設定します。これにより、2 つの状態の間で循環します。

このアニメーションを「loader」要素に適用するには、次のコードを使用します:

.loader {
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. 高度なアニメーション

これで、基本的な読み込みを作成する方法を学びました。のアニメーションを見て、より高度なアニメーションを作成する方法をさらに調べてみましょう。ここでは、クールな読み込みアニメーションとそのコード例をいくつか紹介します。

1. ウェーブ アニメーション

この読み込みアニメーションでは、次のコードを使用してウェーブ モードのキー フレームを定義します:

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0);
  }
  
  50% {
    transform: translateX(30px) translateY(15px);
  }
  
  100% {
    transform: translateX(0) translateY(0);
  }
}

上記のコードでは、次のコードを使用します。プロパティを変換して波形効果を作成します。 0% および 100% の位置では、要素を初期位置に設定します。 50% の位置では、translateX (水平方向の移動) と translationY (垂直方向の移動) を使用して波形を作成します。

次に、「loader」要素にこのアニメーションを指定します:

.loader {
  animation-name: wave;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. 拡散アニメーション

この読み込みアニメーションでは、次のコードを使用して拡散を定義します。 keyframe:

@keyframes spread {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  
  50% {
    transform: scale(1);
    opacity: 0.1;
  }
  
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
}

上記のコードでは、transform 属性を使用して拡散効果を作成します。 0% と 100% では、要素を最小化と透明度の初期値に設定します。 50% の位置では、scale プロパティを使用して拡散アニメーションを作成します。

次に、「loader」要素にこのアニメーションを指定します。

.loader {
  animation-name: spread;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

概要

CSS を使用すると、Web サイト用のさまざまなタイプの読み込みアニメーションを作成できます。これらの読み込みアニメーションにより、ページの読み込みがより面白くなり、ユーザーの待ち時間の不安が軽減されます。この記事では、基本的な読み込みアニメーションの作成方法と、より高度なアニメーションの作成方法を学びました。これらのコード例があなたの仕事に役立つことを願っています。

以上がCSS Web ページの読み込みアニメーション: さまざまなクールな読み込みアニメーション効果を作成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。