5.CSS3のアニメーション
（ 1 ）アニメーションアニメーション機構（不安定機構、使用された場合、ブラウザの互換性を確保する必要があります）
アニメーションはある CSS3を使用してモジュールのキーフレームは、モバイルの時間変化方法を定義するCSSの属性値は、その期間、繰り返し回数を指定することで、どのように繰り返し、キーフレームの動作を制御します。
@keyframes アニメーションシーケンスを設定するために、配列は、アニメーションシーケンスの特定の時間内に各キーフレームアニメーション要素で説明どのような効果を示します。時間の割合を表すために使用されるキーフレームは、アニメーションシーケンスに表示されます。0％初期時のアニメーションを表現するには、あなたも渡すことができますから表現キーワード。100％アニメーションを表す終了時間は、次のことができますも経由するキーワードを示しています。以下のような：
@keyframes slidein {
{/ *から、または0％* /
余白左：100％;
幅：300％;
}
/ * 中間値の複数、存在してもよいような、20％ 、30％ 、50％など、* /
to{ /*或100%*/
余白左：0％。
幅：100％;
}
}
P {
アニメーションの継続時間：3秒;
アニメーション名：slidein。
}
（アニメーションのスタイルに要素のセットに追加）アニメーションのプロパティの設定
名前-アニメーション：アニメーションの名前。@keyframes 定義された結合の名前を。
アニメーション持続時間：アニメーションの継続時間（映画に必要な時間のサイクル長を完了 ）。ユニット S 、MS、デフォルト値は0 。
アニメーションの繰り返しカウント：繰り返しのアニメーション。デフォルト値は 1 、負することができない、などの小数であってもよく、0.5 半分プレイヤー表す値が無限表さ、無限ループ。
アニメーションの遅延：（アニメーションが実行されるまでの時間に正常にロードされた要素の後に）アニメーションの遅延。単位 S 、MSは、デフォルト値は0 それはすぐにロードするために正常に実行アニメーションの後で、。
アニメーション方向：アニメーションの方向（ならびにアニメーション方向を交互またはリセットの開始点場合なくなります）。通常再生のデフォルト値は正常であり、逆表すフレーム反転の再生順序を、再生終了フレームの出発点は、代替的に表し交互即ち、終了フレームまで再生開始フレームから最初のプレーヤーは、まず、逆再生フレームの順序をセカンダリープレーヤーが同時に終了フレームに開始フレームから再生するように、速度曲線が交互に反転（使いやすさで交互・イーズアウト）、代替逆と交互類似するが、最初のプレーヤーをトランス必要なときターン。
アニメーション再生状態：アニメーションの状態、によってのJS クエリ（またはセット）プロパティはアニメーションが現在実行されているかどうかを決定するか、または、停止する走行が示す動作状態を発現し、一時停止サスペンド状態。
アニメーションフィルモード：アニメーション塗りつぶしモード。指定された CSSのその標的にスタイルを適用する方法の実装の実施前と後のアニメーションを。デフォルト値はいずれも、転送が指示されていないターゲットがキーフレームに遭遇セットの実行中に計算された最後の値を保持し、下位セットの実行中に遭遇した最初のキーフレームを保持するターゲットの計算値を表します。
アニメーションのタイミング機能：アニメーションカーブの速度。デフォルト値（運動効果の後にスローダウンと同様）を容易にするためには、使いやすさでは表し遅い速い最初のを容易にアウト示し、後にスローダウン、使いやすさにアウトを示しゆっくりと、その後ゆっくりと最初と後に高速、リニアは表し線形成長を（均一）。
サードパーティのアニメーションライブラリ（ https://daneden.github.io/animate.css/ ）：によってリンクタグの特定のアニメーションライブラリ（上記選択URL内の基準線アドレスのGitHubの参照アドレスを対応する図）であってもよいですリンクアニメーションライブラリリファレンススタイルシートアドレスラベルのダウンロード、後に同様の参照がiconfont （というクラスを追加するには、上記の文書に対応する要素に対して対応するクラス名を追加するための操作フォントのアイコンをアニメーションXXXをアニメーションを追加します）。
（ 2 ）遷移アニメーション機構
遷移アニメーションメカニズムとアニメーション差ことアニメーション機構であります
遷移アニメーションは、アクティブトリガ、一般的な使用を必要とする：ホバー擬似要素トリガを
遷移アニメーションなしキーフレームコントロール
したがって、通常の状況下では、単純なトランジションエフェクトの使用トランジションは、複雑なアニメーションを使用してアニメーション。
プロパティ遷移は- 、複数の属性を指定するプロパティを指定するには、トランジションプロパティを指定するすべての属性（指定することができますすべてを）
DURATION転移-転移の持続時間は、秒単位で指定することができ、ミリ秒
タイミング関数遷移-遷移時間曲線（と同様アニメーションタイミング機能）
遅延遷移-遷移遅延を秒単位で指定することができ、ミリ秒
遷移-速記文言の遷移：プロパティ時間タイミング遅延。
（ 3 ）変形例
ビューポートコンピュータ画面、原点と、左上隅のために、右が Xは正の方向をγ軸、下方向にYは、コンピュータユーザーの方向に向けられ、負方向をγ軸、Zは正の方向をγ軸。
transform--はワープ操作要素を実行するために修正関数を指定します
-origin--変換変形可能な要素の起源を特定するために使用
あなたが値を指定した場合、値は、中央、右、上、残っている底。
あなたは2つの値を指定した場合、のいずれかでなければならない長さパーセンテージ、または左、中央、右のキーワード。別のマストは、長さ百分率（パーセンテージ）、又は上部、中央、下部キーを1。
あなたは三つの値を指定した場合、最初の2つの値とのみ2つの値の使用時間は同じであり、3番目の値でなければなりません長さ。それは、常に表し、Zは、オフセットγ軸
回転機能は変形せず、固定小数点変換約要素の回転を定義します。これは、回転の指定された角度の尺度を定義します。角度が正の場合、時計回り、または反時計回りに回転します。
回転X（45deg）についてのX の回転軸 45 度、回転Y（45deg）約Yの回転軸 45 度、回転Z（45 度）約Z 軸の 45 度。回転（角度）及び（）が回転Z 一貫。
スキュー（AX、AY）関数は、せん断またはねじりの要素を表し、AXは水平ねじり表す角度を、 AYは垂直ツイスト表す角度をしてもよいし、別々に使用 skewX値（AX）とskewY（AY）を。
スケール（）関数は、要素のサイズを変更することができ、スケール変換は、各スケーリング方向に座標を定義するベクトルによって達成されます。2つのベクトルの座標が等しい場合、均一なスケーリングはのような単一の値のみであってもよく、スケール（2） 。
（TX、TY）変換要素を移動させることができる機能。Txは要素が水平方向に移動する距離であり、TY 垂直方向の距離の要素可動。