css3アニメーション属性アニメーション(アニメーション)_html/css_WEB-ITnose

CSS3 のアニメーションは、HTML5 の Canvas 描画アニメーションとは異なります。アニメーションは、ページ上にすでに存在する DOM 要素にのみ適用されます。

アニメーションを使用すると、必要なアニメーション効果を作成できますが、少し荒いです。

アニメーションを理解する前に、「キーフレーム」について知っておく必要があります。これを「キーフレーム」と呼びます。

Keyframes には独自の文法規則があり、その名前は「@keyframes」で始まり、その後に「アニメーションの名前」と中括弧のペア「{}」が続きます。括弧はいくつかのスタイル規則です。さまざまな期間については、CSS スタイルの記述方法に少し似ています。 「0%」から「100%」の間など、複数のパーセンテージで構成される「@keyframes」のスタイル ルールの場合、このルールで複数のパーセンテージを作成でき、各パーセンテージにアニメーション効果を持つ要素に必要なパーセンテージを与えます。さまざまな属性を追加して、要素の色、位置、サイズ、形状の移動、変更など、要素が常に変化する効果を実現できるようにします。ただし、注意すべき点の 1 つは、「From」と「to」を使用できることです。 「」はアニメーションの開始位置と終了位置を表します。つまり、「from」は「0%」、「to」は「100%」に相当します。このうち、「0%」は省略できません。他の属性値と同様に、ここにパーセント記号 (「%」) を追加する必要があります。そうでない場合、キーフレームは無効になり、効果がありません。

キーフレームの単位はパーセンテージ値のみを受け入れます。

CSS3 アニメーションは、transition 属性に似ており、どちらも時間の経過とともに要素の属性値を変更します。それらの主な違いは、transition は時間の経過とともに CSS プロパティを変更する前にイベント をトリガーする必要があるのに対し、アニメーションはイベントをトリガーせずに時間の経過とともに明示的に変更することもできることです。アニメーション効果を実現する要素 css の値。

アニメーションには主に次の属性があります:

1.animation-name;

2.animation-duration;

3.animation-timing-function;

4.animation-delay;

5.animation-iteration -count;

6.animation-direction;

7.animation-play-state
次に、それらを 1 つずつ紹介します:

animation-name:

は、アニメーションの名前を定義するために使用されます。アニメーション、デフォルト値は none です。値が none の場合、アニメーション効果はありません。

animation-duration:

は、要素がアニメーションを再生する期間を指定するために使用されます。

animation-timing-function:

アニメーションを再生するには、ease;ease-in;ease-in-out;linear;cubic-bezier の 6 つの方法があります。

animation-delay:

要素のアニメーション遅延の時間を指定します。

animation-iteration-count:

アニメーションを再生する要素のループ数を指定します。数値として を指定できます。デフォルト値は "1" です。無限のループ。

animation-direction:

は、要素アニメーションの再生方向を指定するために使用されます。デフォルト値は、normal に設定すると、アニメーションの各サイクルが順方向に再生されます。 1 つの値は交互です。その機能は、偶数回目ではアニメーションを順方向に再生し、奇数回目では逆方向にアニメーションを再生することです。

animation-play-state:

は要素アニメーションの再生状態を制御するために使用されます。主な値は 2 つあり、実行中と一時停止です。実行中はデフォルト値です。現在再生中のアニメーションを一時停止することで停止したり、一時停止したアニメーションを実行することで再生したりすることができます。アニメーションを一時的に停止すると、要素のスタイルは元の設定状態に戻ります。

以下はアニメーションを呼び出す方法を示しています:

.demo {     width: 50px;     height: 50px;     margin-left: 100px;     background: blue;     -webkit-animation-name:'ani-name';/*动画属性名，也就是我们前面keyframes定义的动画名*/     -webkit-animation-duration: 10s;/*动画持续时间*/     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/     -webkit-animation-delay: 2s;/*动画延迟时间*/     -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/     -webkit-animation-direction: alternate;/*定义动画方式*/}

は、

.demo {     -webkit-animation:'ani-name' 10s ease-in-out 2s 10 alternate;}

と省略することもできます。