CSSアニメーションアニメーション

---

CSSアニメーション構文

animationアニメーション シーケンスを作成するには、プロパティまたはそのサブプロパティを使用する必要があります。このプロパティを使用すると、アニメーションの時間、継続時間、その他のアニメーションの詳細を構成できます。ただし、このプロパティではアニメーションの実際のパフォーマンスを構成できません。実際のパフォーマンスアニメーションの実装はルールによって行われます@keyframes。

属性	説明する
animation-name	@keyframes で記述されたキーフレーム名を指定します
animation-duration	アニメーションサイクルの継続時間を設定する
animation-delay	遅延を設定します。これは、要素が読み込まれてからアニメーション シーケンスが開始するまでの時間です。
animation-direction	アニメーションを実行するたびに逆方向に実行するか、開始位置に戻って再度実行するかを設定します。
animation-iteration-count	アニメーションの繰り返し回数を設定します。アニメーションを無限に繰り返す場合は、infinite を指定できます。
animation-play-state	アニメーションの一時停止と再開が可能
animation-timing-function	アニメーションの速度を設定します。つまり、加速カーブを確立することで、キー フレーム間でアニメーションがどのように変化するかを設定します。
animation-fill-mode	アニメーションが再生されていないとき（開始前、終了後、またはその両方）の要素のスタイルを指定します。

キーフレームルールの設定

• 使用率

@keyframes test {
    
    
  0% {
    
    
    opacity: 1;
  }
  100% {
    
    
    opacity: 0;
  }
}

• からとからを使用する

@keyframes test {
    
    
  from {
    
    
    opacity: 1;
  }
  to {
    
    
    opacity: 0;
  }
}

• もちろん、キーフレームが 2 フレームを超える場合は、パーセンテージ定義を使用することをお勧めします。

• さらに、アニメーションの開始フレームが CSS ルールで割り当てられた値と等しく、設定されていない場合animation-fill-mode、0% および from フレームは削除できます。

アニメーション遅延の詳細な説明

animation-delayさらに興味深いのは、アニメーション遅延 (要素が読み込まれてからアニメーション シーケンスが開始するまでの時間) を設定できることです。

• animation属性。 と省略することもできますanimation: test 2s 1s。最初の時間値は継続時間を表し、2 番目の時間値は遅延時間を表します。

div {
    
    
  width: 100px;
  height: 100px;
  background: #000;
  animation-name: test;
  animation-duration: 2s;
}

div:nth-child(2) {
    
    
  animation-delay: 1s;
}

@keyframes test {
    
    
  0% {
    
    
    transform: translate(0);
  }
  100% {
    
    
    transform: translate(200px);
  }
}

アニメーション遅延は負の値になる可能性があります

これに関するanimation-delay最も興味深いトリックは、負の数を指定できることです。つまり、属性名はアニメーション遅延時間ですが、負の数値を指定するとアニメーションを先に進めることができます。

• これは 3 つのボールの回転ドームです。

.div:nth-child(1) {
    
    
  animation: test 3s infinite linear;
}
.div:nth-child(2) {
    
    
  animation: test 3s infinite -1s linear;
}
.div:nth-child(3) {
    
    
  animation: test 3s infinite -2s linear;
}

アニメーション期間とアニメーション遅延はランダム効果を構築します

animation-duration同じアニメーションに対して、特定の範囲内のランダムと特定の範囲内のランダムを使用して、animation-delayよりランダムなアニメーション効果を効果的に構築し、アニメーションをより自然にします。

• アニメーション方向プロパティは次の値を受け入れます。

  • Normal - アニメーションは通常どおり (順方向に) 再生されます。デフォルト値
  • reverse - アニメーションは逆方向 (逆方向) に再生されます。
  • 代替 - アニメーションは最初に順方向に再生され、次に逆方向に再生されます。
  • alter-reverse - アニメーションは逆方向に再生され、次に順方向に再生されます。

• sassのloopとrandom()関数を利用して、animation-duration2～4秒の範囲でランダム、animation-delay1～2秒の範囲でランダムにすることで、非常に自然で異なる立ち上がりアニメーション効果を得ることができます。画像を繰り返すことで、ランダムな効果を非常にうまくシミュレートできます。

@for $i from 1 to 11 {
    
    
  li:nth-child(#{
    
    $i}) {
    
    
    animation-duration: #{
    
    random(2000) / 1000 + 2}s;
    animation-delay: #{
    
    random(1000) / 1000 + 1}s;
  }
}

アニメーションタイミング関数イージング関数

イージング関数はアニメーションにおいて非常に重要であり、各アニメーション サイクルでのアニメーション実行のリズムを定義します。

• イージングは​​主に 2 つのカテゴリに分類されます。

  • cubic-bezier-timing-function 3次ベジェ曲線イージング関数
  • step-timing-function ステップイージング機能

• anime-timing-function プロパティは次の値を受け入れます。

  • easy - アニメーションは遅い速度で始まり、その後速度が上がり、終了する前に遅くなります (デフォルト)
  • 線形 - 一定速度、アニメーションの速度は最初から最後まで同じです
  • easy-in - アニメーションは低速で始まります
  • イーズアウト - アニメーションは低速で終了します
  • easy-in-out - アニメーションは低速で開始および終了します。
  • cubic-bezier(n,n,n,n) - 3次ベジェ関数で独自の値を定義できます。

• さまざまなベジェ曲線パラメーターの作成とデバッグに非常に便利な Web サイト ( https://cubic-bezier.com/ ) を紹介します。

ステップイージング関数のいくつかの表現

{
    
    
    animation-timing-function: step-start;
    animation-timing-function: step-end;

    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}

• CSS で最も一般的に使用されるステップ イージング関数は、フレーム単位のアニメーションを実現するために使用するもので、animation-timing-function: steps(6)これを CSS アニメーションと接続するために使用できます。

.box {
    
    
  width: 256px;
  height: 256px;
  background: url('@/assets/img/test.jpg');
  animation: test 0.6s steps(6, end) infinite;
}
@keyframes test {
    
    
  0% {
    
    
    background-position: 0 0;
  }
  100% {
    
    
    background-position: -1536px 0;
  }
}

• まず、正確に 256 x 6 = 1536 であることを知っておく必要があります。したがって、上の図は実際には正確に 6 つのセグメントに分割できます。
  • サイズ 256px の div を設定し、この div を次のように割り当てましたanimation。 スプライト .6s ステップ(6) 無限アニメーション
  • このうち、手順(6)は、設定した@keyframesアニメーションを6回(6フレーム)に分けて実行することを意味し、全体のアニメーション時間は0.6秒なので、各フレームの停止時間は0.1秒となります。
  • アニメーション効果はbackground-position: 0 0からbackground-position: -1536px 0 です。上記の CSS コードは設定されていないためbackground-repeat、実際にはbackground-position: 0 0 は : -1536px 0 と同等ですbackground-position。つまり、アニメーション プロセス全体で画像が 1 周進みます。ただし、毎回特定の場所で1フレーム、合計6フレーム停止します
• 実際、アニメーション処理中、background-positionの値は実際にはbackground-position: 0 0、background-position: -256px 0、background-position: -512px 0 などとなり、 : -1536px 0 まで続きます。 背景の特性background-positionにより、実際には単に返されるだけですrepeat元のポイントに戻り、再び開始します。同じアニメーションの新しいラウンドです。

同じアニメーション効果のトゥイーン アニメーションとフレームごとのアニメーションの解釈の比較

• 前述の 3 次ベジェ曲線イージングとステップ イージングは​​、実際にはトゥイーン アニメーションとフレーム単位のアニメーションに対応します。
• 設定を通じてstepsトゥイーン アニメーションをフレーム単位のアニメーションに変換します

.box {
    
    
  animation: test 2s steps(10) infinite;
}
@keyframes test {
    
    
  0% {
    
    
    transform: rotate(0);
  }
  100% {
    
    
    transform: rotate(360deg);
  }
}

anime-play-state はアニメーションの状態を制御します

animation-play-state、名前が示すように、ビデオ プレーヤーの開始と一時停止と同様に、アニメーションの状態 (実行または一時停止) を制御でき、CSS アニメーションでアニメーションの状態を制御する限られた手段の 1 つです。

• 値は 2 つだけです (デフォルトは実行中): animation-play-state: 一時停止 | 実行中;

• 使い方もとても簡単です。次の例を見てください。ボタンをホバーするとアニメーションが一時停止されます。

.box {
    
    
  width: 100px;
  height: 100px;
  background: deeppink;
  animation: test 2s linear infinite alternate;
}

@keyframes test {
    
    
  100% {
    
    
    transform: translate(100px, 0);
  }
}

.stop:hover ~ .box {
    
    
  animation-play-state: paused;
}

anime-fill-mode は各段階での要素の状態を制御します

• animation-fill-modeこのプロパティは次の値を受け入れます。

  • none- デフォルト値。アニメーションは、実行前または実行後に要素にスタイルを適用しません。
  • forwards- アニメーションが開始される前の要素のスタイルは、CSS ルールによって設定されたスタイルですが、アニメーション終了後のスタイルは、実行中に発生した最後のキーフレームによって計算されます (つまり、最後のフレームで停止しました)。
  • backwards- アニメーション開始前の要素のスタイル (トリガーされていないアニメーション ステージとアニメーション遅延期間を含む) は、アニメーション実行時の最初のフレームとなり、アニメーション終了後のスタイルは CSS ルールで設定されたスタイルに復元されます。
  • both- 統合されたアニメーションフィルモード: 逆方向およびアニメーションフィルモード: 順方向の設定。アニメーション開始前のスタイルは、アニメーション実行中の最初のフレームであり、アニメーション終了後の最後のフレームで停止します。

アニメーション反復回数/アニメーション方向 アニメーションのサイクル数と方向

• animation-iteration-countアニメーションの実行回数を制御します。数値または を指定できますinfinite。数値は小数であることに注意してください。

• animation-directionアニメーションの方向、順方向、逆方向、順方向交互、逆方向交互を制御します。

• 上記の説明ではanimation-fill-mode、アニメーションの@keyframes最初と最後のフレームの実際のステータスもアニメーションの実行方向と影響を受けるため、 で定義された最初のフレームの代わりに、アニメーションが実行されているときの最初のフレームを使用しましたanimation-direction。animation-iteration-count

• CSS アニメーションでは、アニメーションの実行時に最初と最後のフレームのステータスを共同で決定しますanimation-iteration-count。animation-direction

  • アニメーション実行の最初のフレームは次のようにanimation-direction決定されます。
  • アニメーション実行の最後のフレームは、animation-iteration-countとによってanimation-direction決定されます。

.box {
    
    
  animation: test 4s linear;
  animation-play-state: paused;
  transform: translate(0, 0);
}
@keyframes test {
    
    
  0% {
    
    
    transform: translate(100px, 0);
  }
  100% {
    
    
    transform: translate(300px, 0);
  }
}

• この要素には、translate(0, 0) という変位変換がありません。アニメーションでは、最初のキーフレームと最後のキーの translationX はそれぞれ 100px と 300px です。アニメーションの方向が異なると、初期状態は次のようになります。

  • アニメーションを設定しない場合 – 初期状態はtransform:translate(0,0)です。
  • anime-fill-mode:backwards;animation-direction:normal;が設定されている場合、初期状態は@keyframesのtransform:translate(100px,0)です。
  • anime-fill-mode:backwards;animation-direction:reverse;が設定されている場合、初期状態は@keyframesのtransform:translate(300px,0)です。

分割統治アニメーション

ここでは、落下中に透明度を変更する div ブロックの落下アニメーションを実装します。

div {
    
    
  width: 100px;
  height: 100px;
  background: #000;
  animation: combine 2s;
}
@keyframes combine {
    
    
  100% {
    
    
    transform: translate(0, 150px);
    opacity: 0;
  }
}

/* or */

div {
    
    
  animation: falldown 2s, fadeIn 2s;
}

@keyframes falldown {
    
    
  100% {
    
    
    transform: translate(0, 150px);
  }
}
@keyframes fadeIn {
    
    
  100% {
    
    
    opacity: 0;
  }
}

• CSS アニメーション ルールでは、アニメーションは複数のアニメーションを受け取ることができます。この目的は、再利用だけでなく、分割統治も目的としています。各属性レベルでアニメーションをより正確に制御できます。