ホームページ > 記事 > ウェブフロントエンド > ローディングアニメーションとは何ですか?
始める前に、少し知識を復習しましょう。CSS3 の新しいキーフレーム アニメーションを使用して、多くのアニメーションを実装できます。アニメーション遅延を使用してアニメーションの遅延実行を制御し、豊かな効果を実現できます。
アニメーション遅延の値が正の値の場合、アニメーションは初期状態から遅延されます。
アニメーション遅延の値が負の値の場合、アニメーションは対応する値(負の数の絶対値) 状態で実行を開始します。
(エフェクトの画像が鮮明でない場合があります、ご了承ください)
1.最初のエフェクト
合計16個の小さな正方形、位置を配置し、キーを使用して正方形を変更しますフレームの透明度
{animation: ball 2s 0s ease infinite;} @keyframes ball { 0%{ opacity: 1; } 50%{ opacity: 1; } 51%{ opacity: 0; } }
ここでの全体的なアニメーション時間は 2 秒で、均等に分割された 16 個の正方形は 0.125 秒であるため、設定したアニメーション遅延値は -1.875 秒から始まります。数値の差は 0.125 で、0 に達するまで増加します。
2. 2番目の効果
中央の大きなボールの位置は変更されず、その隣の3つの小さなボールがそれぞれ3つの正方形に含まれます。 {top:0;left :0;}、この交差は正方形のrotateZ回転を設定することで形成できます。 キーフレームアニメーションを通じてアニメーションプロセスを設定し(以下のキーフレームアニメーションの記述は最良の方法ではありません)、3つのボールが異なるタイミングで前から移動できるように、各ボールのアニメーション遅延値を設定します。{animation: turn_atom 1.5s 0s ease infinite;} @keyframes turn_atom { 0%{ height:25px; width: 25px; top: 0; left: 0; } 50%{ height: 20px; width: 20px; top: 60px; left: 60px; } 51%{ height: 15px; width: 15px; top: 60px; left: 60px; } 100%{ height: 20px; width: 20px; top: 0; left: 0; } }さらに、大きなボールの周りを小さなボールが回転する視覚効果を実現するには、キー フレーム アニメーションを通じて 3 つの小さなボールの親コンテナーの Z インデックス値を設定する必要があります。
{animation: turn_atomZ 1.5s 0s ease infinite;} @keyframes turn_atomZ { 0%{ z-index: 6; } 50%{ z-index: 6; } 51%{ z-index: 4; } }
3. 3番目のエフェクト
このエフェクトは比較的単純で、ボールのサイズと透明度(ボールの透明度と透明度)を変更するだけです。高さは最初に定義されます)。
{animation: light 1.5s 0s ease infinite;} @keyframes light { 50%{ opacity: 0.4; height: 15px; width: 15px; } }
4. 4番目の効果
最初は4つのボールを同じ位置に配置し、ボールの左の値とボールをキーフレームで変更します。サイズは十分です。
{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;} @keyframes r_ball { 50%{ left: 100%; } } @keyframes r_ballZ { 25%{ transform: scale(0.5); } 50%{ transform: scale(1); } }今回はここまでです、後ほど追加します。 (続く)
以上がローディングアニメーションとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。