CSS3アニメーションノート_html/css_WEB-ITnose

css3 アニメーション

CSS3 では、アニメーションを通じて複雑なアニメーション シーケンスを作成できます。これは、transition 属性と同様に、CSS プロパティを制御してアニメーション効果を実現するために使用されます。
アニメーション効果を実現するために、アニメーションは主に 2 つの部分で構成されます。

1. Flash アニメーションと同様のキー フレームを通じてアニメーションを宣言します。
   
2. より複雑なアニメーション効果を実現するには、アニメーション属性のキーフレームで宣言されたアニメーションを呼び出します。

キーフレームを宣言する

CSS3では@keyframeをキーフレームと呼びます。
@keyframes の構文規則: 名前は @keyframes で始まり、アニメーションの名前 (animation-name) に加えて中括弧のペア "{...}" が続き、括弧内には複数の異なる期間が含まれます。スタイルのルール。 @keyframes のスタイル ルールは複数のパーセンテージで構成され、各パーセンテージ スタイル ルールは異なるスタイル属性を設定できます。キーワード「from」を使用できます。「to」はアニメーションの開始と終了を表し、「from」は 0% に相当し、「to」は 100% に相当します。

@keyframes yxz { 0% {    margin-left: 100px;    background: green; } 40% {    margin-left: 150px;    background: orange; } 60% {    margin-left: 75px;    background: blue; } 100% {    margin-left: 100px;    background: red; }}

ここでは、「yxz」というアニメーションを定義します。そのアニメーションは 0% から始まり、40% と 60% の 2 つのプロセスを経ます。上記のコードの具体的な意味は次のとおりです。要素が 100 ピクセルの左の位置に配置され、背景色が緑色の場合、アニメーションは 0% に配置され、40% の場合、要素は 150 ピクセルの左の位置に遷移し、背景色はオレンジになります。要素は左の75pxの位置に遷移し、背景色は青になり、最後にアニメーションを100%終了する位置要素は左の100pxの開始点に戻り、背景色は赤になります。このアニメーションに 10 秒の実行時間を与えるだけだと仮定すると、各セグメントの実行ステータスは次のようになります:

@keyframes 内のキーフレームは順番に指定する必要はありません。アニメーション内のキーフレームの順序は、宣言された順序ではなくパーセンテージ値によって決定されるため、キーフレームを指定します。

@keyframes yxz{	0%,40%{		width:200px;		height:200px;	}	20%,60%,80%{		width:100px;		height:100px;	}	100%{		width:0;		height:0;	}}

この例では、0%と40%に同じスタイルが適用され、20%、60%、80%にも同じスタイルが適用され、100%には別のスタイルが適用されます。
これら 2 つのアニメーションは、どの要素にもアタッチされていないため、効果がありません。 @keyframes アニメーションを宣言した後、アニメーションを有効にするには、CSS プロパティを通じて @keyframes で宣言されたアニメーションを呼び出す必要があります。

keyframesの呼び出し

@keyframesで宣言したアニメーションを呼び出すには、アニメーション属性animationを使用します。 アニメーション属性であるアニメーションは、8 つのサブ属性を含む複合属性です。構文は次のとおりです:

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-play-state> || <animation-fill-mode>] *

animation-name: 主にキーフレーム アニメーションの名前を指定するために使用されます。この名前は @keyframes で宣言された名前と同じである必要があります。 CSS がアニメーションをロードすると、対応する名前がアニメーションの実行に使用されます。

animation-name:none | IDENT [,none | IDENT] *

IDENT:は@keyframesが作成したアニメーションの名前です。
None: デフォルト値。値が none の場合、アニメーション効果はなく、アニメーションをオーバーライドするために使用できます。

animation-duration: 主にアニメーションの再生に必要な時間を設定するために使用されます。単位は s (秒) または ms (ミリ秒) です。デフォルト値は 0 です。

animation-duration:<time> [,<time>] *

animation-timing-function: 主にアニメーションの再生速度を設定するために使用されます。

transition-timing-function と同様に、クリックして表示します。

animation-delay: 主にアニメーションの遅延時間を設定するために使用されます。

animation-duration:<time> [,<time>] *

time が正の整数の場合、それは遅延時間です。負の整数の場合、再生時間は切り捨てられます (アニメーション期間に使用される時間の一部が切り取られます。つまり、この部分がスキップされます)。の値を指定して次のアニメーションに直接進みます)

animation-iteration-count: 主にアニメーションの再生回数を設定するために使用されます。

animation-iteration-count: infinite | <number> [,infinite | <number>] *

通常は整数ですが、浮動小数点数も使用できます。デフォルト値は 1 です。値が無限の場合、アニメーションは無限に再生されます。

animation-direction: 主にアニメーションの再生方向を設定するために使用されます。

animation-direction:normal | alternate [,normal | alternate] *  

デフォルト値はnormalで、アニメーションはループするたびに順方向に再生されます。交互に、アニメーションは順方向に 1 回再生され、逆方向に 1 回再生されます。

animation-play-state: 主にアニメーションの再生状態を制御するために使用されます。

animation-play-state:running | paused [,running | paused] *

デフォルト値は「実行中」です。これは、再生を一時停止することで停止できることを意味します。

animation-fill-mode: 主にアニメーション時間外の属性、つまりアニメーションの開始前または終了後の属性を設定するために使用されます。

animation-fill-mode:none | forwards | backwards | both

デフォルト値は none で、アニメーションがスケジュールどおりに実行され、終了すると、初期状態に戻ります。前方に進むと、アニメーションが終了すると最後のフレームに留まります (最後の状態を保持します)。逆にすると、アニメーションの開始時に最初のフレームがすぐに適用されます。両方とも、前進と後進の機能を同時に備えています。

アニメーションの基本知識を学んだ後は、学んだことを応用して練習する必要があります。コードをコピーして、ブラウザで効果を表示できます。

りー

CSS3アニメーションが完成しました。