CSS3 アニメーション – ステップ機能の説明

最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメーションの中に「steps」というあまり馴染みのない単語を見つけました。ソース コードでは次のように書かれています。

animation: thunder 2s steps(1, end) infinite;

関連情報を調べたところ、steps関数はanimation-timing-function属性の値であることがわかりました。では、この関数とeaseやlinearなどの他の値の違いは何でしょうか？

手順

関連情報を調べたところ、 animation-timing-functionについて十分に理解していないことがわかりました。実際、 animation-timing-functionの関数は、ベジェ曲線関数である steps() と cubic-bezier() を参照しています。 linear や easy などの値は、実際にはcubic-bezier()関数の特殊な値です。 steps() 関数にはstep-startとstep-end 2 つの特殊な値もあります。これらの前提を理解した後、steps 関数の役割を詳しく分析してみましょう。

実際、ステップ関数とcubic-bezier関数は、ジャンプと連続という 2 つの形式のアニメーションに対応しています。 cubic-bezier関数の通常の使用方法を確認しましょう。

div {
  アニメーション: 1 秒の線形無限交互移動。
}
@keyframes 移動 {
  0% {
    左マージン: 0;
  }
  30% {
    左マージン: 50px;
  }
  100% {
    左マージン: 100px;
  }
}

@keyframes でキーフレームを定義するだけです。cubic cubic-bezier関数は、キーフレーム間のフレームを埋めて、スムーズなアニメーションを作成するのに役立ちます。ただし、アニメーションを連続的に再生するのではなく、飛び飛びに再生したい場合もあります。その場合は、steps 関数を使用する必要があります。

steps 関数は、数値と位置の 2 つのパラメーターを受け取ります。 number は正の整数で、position には start と end の 2 つの値があります。先ほど、steps の 2 つの特殊な値、step-start と step-end について説明しました。これらは実際にはそれぞれ steps(1, start) と steps(1, end) を表します。これら 2 つのパラメータは何を意味するのでしょうか?

number: number はアニメーションがいくつのセグメントに分割されるかを示します。たとえば、上記の例では、div が 0px から 100px に移動するプロセス全体が 4 つのセグメントに分割されることを示しています。

position: 位置パラメータはオプションで、デフォルトは end です。 start と end はどういう意味ですか? 私の理解では、その数字はアニメーション プロセス全体を複数のセグメントまたはサイクルに分割します。start は、アニメーションの状態が各サイクルの開始点で瞬時に変化することを意味し、end は、アニメーションの状態が各サイクルの終了点で瞬時に変化することを意味しま す。以下は W3C 公式ドキュメントからの画像です:

上の画像の座標系では、x 軸が時間、y 軸がアニメーションの進行状況を表しています。この画像で注目すべきは、アニメーションの状態を表す実線の点です。ステップ(1、開始)を表す最初の図を見てみましょう。これまでの説明によれば、アニメーション全体が 1 サイクルとなり、サイクルの開始点でアニメーションの状態が変化するように start パラメータが指定されているため、最初の実線円の座標は (0,1) であることがわかります。 2 枚目の画像では、end が指定されているため、サイクルの終了点でアニメーションの状態が突然変化するため、対応する 2 つの実線円の座標は (0,0) と (1,1) になります。次のステップ(3, start)とステップ(3, end)についても同様ですが、ここでは詳細に分析しません。

次に、steps 関数の役割をより直感的に理解するために、いくつかの例を挙げて理解を深めます。

参考までに、一貫したアニメーションを以下に示します。コードの一部は次のとおりです。

div {
  幅: 100ピクセル;
  高さ: 100px;
  背景色: 赤;
  アニメーション: 2 秒線形移動;
}
@keyframes 移動 {
  0% {
    左マージン: 0;
  }
  100% {
    左マージン: 200px;
  }
}

効果は以下のとおりです。

赤い四角形が2秒後に終点まで一定の速度で移動し、その後開始位置に戻ることがわかります。

以下は手順(1, 開始)の例です。

div {
  幅: 100ピクセル;
  高さ: 100px;
  背景色: 赤;
  アニメーション: 2 秒ステップ開始で移動します。
}

効果は以下のとおりです。

更新をクリックした瞬間にブロックが終点に到達し、2 秒後に開始位置に戻ることがわかります。

ステップ(1, 終了)の例を見てみましょう:

div {
  幅: 100ピクセル;
  高さ: 100px;
  背景色: 赤;
  アニメーション: 2 秒ステップ移動 - 終了;
}

効果は以下のとおりです。

更新をクリックしてもブロックが動かないことがわかります。これは、2 秒後にブロックが瞬時に 200 ピクセルの位置に移動し、アニメーションが終了して開始位置に戻るためです。このプロセスは非常に高速で肉眼では見えないため、ブロックが動いていないように見えます。終了点に留まりたい場合は、div にanimation-fill-mode: forwardsを追加するだけです。

複数のセグメントに分割する状況を見てみましょう。まず、スタートが複数のセグメントに分割されます。

div {
  幅: 100ピクセル;
  高さ: 100px;
  背景色: 赤;
  アニメーション: 4秒ステップ移動(4, start);
}

効果は以下のとおりです。

上記の例では、4 秒のアニメーションを 4 つのサイクルに分割しています。ブロックは各サイクルの開始点、つまり 0 秒、1 秒、2 秒、3 秒で移動します。上記のエフェクト ダイアグラムから、更新をクリックした瞬間に状態の変更が完了し、3 秒後に終了点に到達することもわかります。アニメーションが終了するまで 1 秒間終了点に留まり、開始位置に戻ります。

end が複数のセグメントに分割される状況を見てみましょう。

div {
  幅: 100ピクセル;
  高さ: 100px;
  背景色: 赤;
  アニメーション: 4秒ステップ移動(4, end);
}

効果は以下のとおりです。

end を指定すると、各サイクルの終了時 (この場合は 1 秒、2 秒、3 秒、4 秒) にアニメーションの状態が変化します。上記のエフェクト図から、更新をクリックしてから 1 秒後にブロックが移動し始め、4 秒後にブロックが終了点に移動する瞬間に、アニメーションの終了によりブロックが開始位置に戻るため、ブロックが終了点に移動していないという錯覚が生じることがわかります。

要約する

上記は、エディターが導入した CSS3 アニメーション ステップ機能の詳細な説明です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!