アニメーションの一般的な特性を知っている必要があります

アニメーションの最も一般的に使用されるプロパティは次のとおりです。

1.アニメーション名

animation-nameの値はデフォルトではnoneであり、アニメーションがないため、animation-name属性が存在している必要があります。

2.アニメーション期間(アニメーションを1回実行するのに必要な時間)

animation-durationの値はデフォルトで0であり、アニメーションがないため、animation-duration属性も存在する必要があります。

3. animation-delay(開始前のアニメーションの遅延時間)

animation-delayの値は秒(s)またはミリ秒(ms)で、デフォルト値は0で、遅延なしです。

4.アニメーションタイミング機能(サイクルを完了するためのアニメーションの実行トラック)

animation-timing-functionの値はベジェ曲線です。デフォルト値はeaseです。つまり、アニメーションは低速で開始し、その後加速し、最後に減速してから終了します。最も一般的に使用される値は次のとおりです。

(1)線形:アニメーションの速度が最初から最後まで同じであることを示します。

(2)イーズイン:アニメーションが低速で開始することを示します。

(3)ease-out:アニメーションが低速で終了することを示します。

(4)イーズインアウト:アニメーションが低速で開始および終了することを示します。

使用する値がない場合は、3次ベッセル関数を直接使用することもできます。Webサイトはhttp://cubic-bezier.comで、必要な値を直接デバッグできます。また、ブラウザーで直接デバッグすることもできます。ベッセル関数の視覚的なデバッグは、ブラウザのデバッグツールでサポートされています。

5. animation-iteration-count(アニメーション再生の数)

animation-iteration-countプロパティ値には2つのタイプがあります。

(1)数値を直接書き込んで、アニメーションを再生する回数をカスタマイズします。

(2)無限:アニメーションがワイヤレスでループするように設定します。

6. animation-fill-mode(要素のアニメーションが終了した後、または開始しない場合の要素スタイルの定義)

デフォルト値はnoneです。これは、アニメーションが終了または開始しない場合に要素がスタイル設定されないことを示します

一般的な属性値は次のとおりです。

(1)転送:アニメーションが終了した後、要素は現在のスタイルを直接使用します。

(2)後方:アニメーションの遅延時間要素がキーフレームのfrom属性値またはto属性値を使用することを示します(アニメーション方向が逆または代替逆の場合)。

7.アニメーションの方向(アニメーションを逆に再生するかどうか)

デフォルト値は通常で、アニメーションは通常どおり再生されます。アニメーションが1回だけ再生される場合、この属性は効果がありません。

一般的に使用される属性値は次のとおりです。

(1)reverse:アニメーションが逆に再生されることを示します。

(2)交互:アニメーションが奇数回再生されると順方向に再生され、均等に再生されると逆方向に再生されることを示します。

(3)alternate-reverse ::アニメーションが奇数回再生されると逆方向に再生され、偶数回再生されると順方向に再生されることを示します。

アニメーションプロパティは、プロパティ値を個別に設定する必要がない限り、通常、書き込み時に組み合わせられます。アニメーションプロパティの短い形式は次のとおりです。

公開された398元の記事 ウォンの賞賛182 ビュー370 000 +

おすすめ

転載: blog.csdn.net/yexudengzhidao/article/details/105556545