CSSアニメーションのsteps_html/css_WEB-ITnose

アニメーションはデフォルトでイーズモードで遷移し、各キーフレーム間にトゥイーンアニメーションを挿入するため、アニメーション効果が一貫しています。 easy、linearなどの遷移関数はトゥイーンを挿入します。ただし、一部のエフェクトはトゥイーンを必要とせず、キー フレーム間のジャンプのみを必要とします。この場合は、ステップ トランジション方法を使用する必要があります。この記事の最後に事例があります。

ステップの使用法

簡単に言えば、ある状態から別の状態への遷移はスムーズであり、ステップは分散遷移を実現できます。 Steps の使用法:

steps(n,[start | end])

n は自然数であり、steps 関数はアニメーションを n 等分に分割します。

• step-start

  rree

• step-end

   等同于 `steps(1,start)` ，动画分成 1 步，动画执行时以左侧端点为开始 ；    

分からないですよね？私もわかりません、上記は公式声明です。それから読んでください

ステップを区別する

デモでステップの違いを確認できます: 強く突いてください

steps(4,start)とsteps(1,start)の最大の違いは、各アニメーションが「ジャンプ」することです。つまり、0% ～ > 25% では、ステップ (1) は 1 ステップで 0% から 25% に直接ジャンプしますが、ステップ (4) は 0 % ～ > 25% まで徐々に 4 ステップかかります。 4つのステップをジャンプする必要があります!

ゆっくり体験して、ステップの役割を知ってください

Case-Console効果

最初にデモを実行してください

ここではsteps(1,start)、アニメーションを示します。 状態は2つだけです: 0% (100%) と 50% なので、1 つのステップにジャンプして直接旅を終了します。

ステップ(4)に変更すると、ステップの機能がよりよくわかります

ケース - Renrenのホームページの効果

まずRenrenのホームページの効果を見てください:

それからクリックしてくださいデモについて

ステップごとの分析:

• まず、s1 と同様にアニメーションを追加しません

• 次に、s2 のようにアニメーションを追加しますが、ステップは追加しません。これは奇妙ですよね? ステップがなく、アニメーションが一貫しているため、マーキーのようなエフェクトが表示されます。 Flash アニメーションはフレームごとに大きな画像にエクスポートされ、適切な手順とアニメーション時間を使用すると、Renren.com のホームページのような滑らかなアニメーション効果を確認できます。

  りー

• へー、やっとステップの役割が分かりました。このプロセスは、最初は s1 しか体験できませんが、その後 css3 で s3 と同様に素晴らしいアニメーションを体験できるようになります。ユニット後は、すべてのユーザーに満足していただけます。

原文

私のブログへようこそ