これまでの研究から、transition 属性を使用して単純な遷移アニメーションを実現できることがわかっていますが、遷移アニメーションは開始状態と終了状態を指定することしかできず、プロセス全体が特定の関数によって制御されるため、あまり柔軟性がありません。このセクションでは、より複雑なアニメーションであるアニメーションを紹介します。
アニメーション: トランジションと同様に、いくつかの動的エフェクトを実現できます。違いは、トランジションは特定の属性が変化するときにトリガーする必要があるのに対し、アニメーション エフェクトは動的エフェクトを自動的にトリガーできることです。アニメーション効果を設定するには、まずキーフレームを設定してアニメーション実行の各ステップを設定する必要があります。キーフレーム設定の形式は次のとおりです。
<style>/*アニメーション キーフレームを定義します。キーフレームの名前は test*/@keyframestest{/*from はアニメーションの開始位置を示し、0% で表すこともできます。 */from{margin-left:0;}/*to はアニメーションの終了位置を示し、100% で表すこともできます。 */to{margin-left:100%;}}</style>CSS のアニメーションは、Flash のフレーム単位のアニメーションに似ています。CSS でアニメーションを使用すると、多くの Web ページで動的画像、Flash アニメーション、または特殊効果を置き換えることができます。
アニメーションは、要素をあるスタイルから別のスタイルに徐々に変更する効果です。スタイルは、必要なだけ、何度でも変更できます (非常に公式な回答)。
CSS3animation（アニメーション）プロパティ。
@キーフレーム
@keyframes ルールを使用すると、アニメーションを作成できます。
アニメーションは、CSS スタイルのセットを別のセットに徐々に変更することによって作成されます。この CSS スタイルのセットは、アニメーション中に複数回変更できます。変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。
0% はアニメーションの開始時間、100% はアニメーションの終了時間です。ブラウザーを最適にサポートするには、常に 0% および 100% セレクターを定義する必要があります。ここで、0% は 1 フレーム、50% は 1 フレーム、100% も 1 フレームです。
最後に、アニメーション プロパティを使用してアニメーションの外観を制御し、アニメーションをセレクターにバインドします。
アニメーション名は必須です。アニメーションの名前を定義します。
キーフレームセレクターが必要です。アニメーション期間のパーセンテージの有効な値: 0 ～ 100% (0% と同じ) ～ (100% と同じ)
CSS スタイルが必要です。 1 つ以上の有効な CSS スタイル プロパティ
例えば：
@keyframesname{0%{上:0px;左:0px;背景:赤;}25%{上:0px;左:100px;背景:青;}50%{上:100px;左:100px;背景:黄色; }75%{上:100px;左:0px;背景:緑;}100%{上:0px;左:0px;背景:赤;}}1. アニメーション名属性: 要素にバインドする必要があるアニメーション名を設定します。
アニメーション名属性は、アニメーションを指定された HTML 要素にバインドするために使用されます。属性のオプションの値は次のとおりです。
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:相対;アニメーション名:ボール;}</style></head><body><div></div></body></html>実行結果:
注: アニメーションを正常に再生するには、animation-duration 属性も定義する必要があります。定義しないと、animation-duration 属性のデフォルト値が 0 であるため、アニメーションは再生されません。
2. anime-duration 属性: アニメーションが 1 サイクルを完了するのにかかる秒数またはミリ秒数を定義します。
● time: アニメーションが完了するまでにかかる時間を指定します。デフォルト値は 0 で、アニメーション効果がないことを意味します。
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:相対;アニメーション名:ボール;アニメーション期間:2 秒;}</style></head><body><div></div></body></html>3. アニメーション タイミング関数: 使用される数学関数は、3 次ベジェ曲線およびスピード カーブと呼ばれます。この関数を使用すると、独自の値を使用することも、事前定義された値の 1 つを使用することもできます。
●linear: アニメーションの速度は最初から最後まで同じです。
●ease：デフォルトです。アニメーションは低速で始まり、その後速度が上がり、終了する前に遅くなります。
●ease-in: アニメーションは低速で始まります。
●ease-out: アニメーションは低速で終了します。
●ease-in-out: アニメーションの開始と終了は低速で行われます。
●cubic-bezier (n,n,n,n): cubic-bezier() 関数を使用して、アニメーションの再生速度を定義します。パラメータの値の範囲は 0 から 1 までの値です。
4. アニメーション遅延属性: アニメーションがいつ開始されるかを定義します。
●時間：オプション。アニメーションが開始されるまでの待機時間を秒またはミリ秒で定義します。デフォルト値は 0 です。
注: 単位は秒 (s) またはミリ秒 (ms) です。
5. anime-iteration-count 属性: アニメーションを何回再生するかを定義します。
属性のオプションの値は次のとおりです。
6. anime-direction 属性: アニメーションをループ内で逆再生するかどうかを定義します。
●normal：デフォルト値。アニメーションは通常どおり再生されます。
●reverse: アニメーションは逆方向に再生されます。
●代替: アニメーションは奇数 (1、2、5...) で順方向に再生され、偶数 (2、4、6...) で逆方向に再生されます。
●alternate-reverse: アニメーションは、奇数回 (1、3、5...) で逆方向に再生され、偶数回 (2、4、6...) で順方向に再生されます。
7. anime-fill-mode 属性: アニメーションが再生されないとき (アニメーションが完了したとき、またはアニメーションの再生開始までに遅延があるとき) に要素に適用されるスタイルを指定します。
注: デフォルトでは、CSS アニメーションは最初のキーフレームが再生されるまで要素に影響を与えず、最後のキーフレームが完了すると要素への影響を停止します。 anime-fill-mode プロパティはこの動作をオーバーライドします。
●デフォルト値はなし。 : アニメーションは、アニメーションの実行前後にターゲット要素にスタイルを適用しません。
●forwards: アニメーションが終了した後 (animation-iteration-count によって決定)、アニメーションはこの属性値を適用します。
●backwards: アニメーションは、アニメーション遅延定義中にアニメーションの最初の反復を開始したキーフレームで定義されたプロパティ値を適用します。これらは、from キーフレーム (アニメーションの方向が「normal」または「alternate」の場合)、または to キーフレーム (アニメーションの方向が「reverse」または「alternate-reverse」の場合) の値です。
●どちらのアニメーションも順方向と逆方向のルールに従います。つまり、アニメーションはアニメーション プロパティを両方向に拡張します。
8.animation-play-state: アニメーションが実行中か一時停止中かを指定します。
●paused: アニメーションの一時停止を指定します。
●running：走行アニメーションを指定します。
9. 初期値: プロパティをデフォルト値に設定します。
●initial: キーワードは、CSS プロパティをデフォルト値に設定するために使用されます。
●initial: キーワードは、任意の HTML 要素の任意の CSS 属性に使用できます。
10. 継承: 親要素から属性を継承します。
●inherit: キーワードは、属性が親要素から値を継承することを指定します。
●inherit: キーワードは、任意の HTML 要素の任意の CSS 属性に使用できます。
アニメーション
アニメーション属性は、アニメーション名、アニメーション期間、アニメーションタイミング関数、アニメーション遅延、アニメーション反復数、アニメーション方向、アニメーションフィルモード、アニメーションプレイ状態、アニメーションの略称です。属性では、上記の属性を複数同時に定義できます。構文形式は次のとおりです。
アニメーション:アニメーション名アニメーション期間アニメーションタイミング関数アニメーション遅延アニメーション反復回数アニメーション方向アニメーションフィルモードアニメーション再生状態;
各パラメータは、上で紹介した各属性に対応します。値が 1 つ以上省略された場合は、属性に対応するデフォルト値が使用されます。
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>アニメーション</title><style>.box1{width:700px;height:500px;background-color:silver;}.box2{width :100px;高さ:100px;背景色:#bfa;マージン左:10px;/*アニメーション名:テスト;*//*アニメーション期間:4秒;*//*アニメーションタイミング関数:リニア; *//*アニメーション反復数:4;*//*アニメーション方向:代替;*//*アニメーションフィルモード:逆方向;*//*アニメーション遅延:2秒;*/アニメーション:test2slinear1s4alternate; }/*アニメーション キーフレームを定義します。キーフレームの名前は test*/@keyframestest{/*from はアニメーションの開始位置を示し、0% で表すこともできます。 */from{margin-left:50px;background-color:orange;}/*to はアニメーションの終了位置を示し、100% で表すこともできます。 */to{margin-left:600px;background-color: yellow;}}/*アニメーションの実行を制御*//*.box1:hover.box2{animation-play-state:paused;}*/</style > </head><body><div><div></div></div></body></html>