CSS3アニメーション
完全なCSSアニメーションは、2つの部分から構成され
- アニメーションのキーフレームの定義されたセット：@keyframesルール
- アニメーションCSS宣言の説明：アニメーションプロパティ
1. @キーフレームのルール
@keyframesルールでCSS3を使ってアニメーションを作成するには、キーフレームは、複数のキーフレームを設定することができ、各キーフレームアニメーションは、プロセスの状態を表し、複数のキーフレームアニメーションが非常に鮮やかであることを確認することができます。
（1）基本的な構文は次のとおりです。
@keyframes animationname{
keyframes-selector{css-style;}
}
（2）サブ属性は、説明しました：
- animationname：アニメーション現在の名前を表す参照が空にすることはできませんとき、それは固有の識別として機能します
- キーフレームセレクタ：セレクタ、すなわちから、またはに、アニメーション全体の処理位置の値に適用される現在のキーフレームの割合であってもよい指定し、キーフレームです。これは、同じ効果と100％にアニメーションの終了を示す、同様の効果からアニメーションを表す0％が始まりました。
- CSS-スタイル：アニメーションの実行状態と、現在のキーフレームに対応するには、定義されている
これら3つの属性のが不可欠と不可欠です
2.animationプロパティ
アニメーション属性は、特定し、長いアニメーションとアニメーションの動作の指定を含むアニメーションCSS宣言を、記述するために使用されます。
（1）基本的な構文：
animation： name duration timing-function delay iteration-count direction fill-mode play-state；
（2）サブ属性は、説明しました：
| プロパティ | 説明 |
|---|---|
| アニメーション名 | それは@keyframesアニメーションの名前を指定します。 |
| アニメーションの継続時間 | アニメーションは、費やした時間の指定された期間を完了します。時間値の値 |
| アニメーションのタイミング機能 | 同様の遷移の値を持つアニメーションの速度曲線を規定 |
| アニメーションの遅延 | アニメーションの規定の開始までの遅延は、値が時間の値であり、 |
| アニメーションの繰り返しカウント | 引当金のアニメーションが再生されます。N：アニメーションの値を見て、無限：アニメーションの規定は、無制限の果たすべき |
| アニメーションの方向 | アニメーションの規定は逆の、次のサイクルで再生するかどうか。ノーマル：デフォルト値は、通常の再生;代替：ターンリバースプレイ動画 |
| animation-塗りつぶしモード | プレイの前または後の規定のアニメーションは、そのアニメーションが表示されます。なし：デフォルトの動作を変更しません。転送：アニメーションが完了すると、属性値を保持している最後の、後方：アニメーション表示、アプリケーションの起動プロパティ値の前に特定の期間内にアニメーション遅延;両方：前方および後方塗りつぶしパターンが適用されます |
| アニメーションプレイ状態 | アニメーションの規定が実行されているかどうかまたは一時停止。一時停止：アニメーションの規定が中断されている;実行されているデフォルト値を、アニメーションの規定が再生されています |
