CSS3 タイミング関数:steps() 介绍_html/css_WEB-ITnose

CSS3 グラデーション/アニメーションを適用する場合、時間を制御する属性 があります。一般的に使用される 3 次ベジェ曲線に加えて、その値にはsteps() 関数もあります。

ステップ関数は、時間関数の間隔の数を指定します (正の整数である必要があります)。2 番目のパラメーターはオプションで、間隔の数を指定する start と end の 2 つの値を受け入れます。各間隔の開始点または終了点にステップ変化があり、デフォルトは終了です。

#demo { animation-iteration-count: 2;//动画重复两次 animation-duration: 3s;//每次动画持续时间为3s }

それぞれsteps(3, start)とsteps(3, end)を適用し、次のようにステップ関数曲線を作成します。

1. ステップ(3, start)を実行します。パラメータの分割アニメーションは 3 つの部分に分かれています。 2 番目のパラメーター「start」は、ステップ変化が各部分の先頭 (図の実線の円) で発生することを指定します。アニメーションの処理は、1/3の状態→2/3の状態→最終状態となります。

これは、5 つのステップでボックスを赤から白に変える最も単純なデモです。このデモでは、最終ステータスが白であることがわかります: http://runjs.cn/detail/mqbdpite

2. ステップ (3, 終了) を実行します

ステップ (3, 開始) との違いは、アニメーションの処理は、初期状態→1/3状態→2/3状態となります。つまり、定義された最終状態は表示されませんが、終了の 1/3 前の状態が表示されます。また、デモ (http://runjs.cn/detail/77frfllv) を通じて観察します。こちらも赤から白に変化しますが、最終的な状態は白ではありません。

添付ファイルのデモは、「Sprite」(リンク http://km.oa.com/group/23033/articles/show/226032 を参照) とsteps() を組み合わせて、走っている小さな男の子のアニメーションを実現します。 。

@keyframes animate {  to { background-position: -3420px; }}.kai.animate { animation: animate 0.75s steps(19) infinite; }

アニメーションの完全な効果は、この画像を 0.75 秒以内に 19 回分割し (スプライト画像上の小さな男の子の動きがちょうど 19 回あります)、それを 3420 ピクセル (画像の幅)。添付ファイルに移動して、男の子を走らせます。