、CSS3トランジション
-
遷移プロパティ
トランジションエフェクトを指定したCSSプロパティ名
-webkit-遷移性：なし/全/プロパティ。 -moz-遷移性：なし/全/プロパティ。 -ms-遷移性：なし/全/プロパティ。 -o-遷移性：なし/全/プロパティ。 遷移プロパティ：なし/すべて/プロパティ。
/ * 参数说明 -なし -すべて、默认值 -プロパティ（CSS属性名）例如色、不透明度... * /
-
遷移期間
どのくらいの効果移行期間の規定
DURATION-移行：時間;
/ * パラメータ -トランジション効果、それは（秒またはミリ秒単位）を完了するのにかかる所定の時間 -デフォルト値は0です* /
-
遷移タイミング機能
所定の速度速度プロファイルの効果
遷移タイミング機能：EASE /リニア/ EASEイン/ EASE-OUT / EASE-で-OUT STEP-スタート/ STEP-エンド/ステップ（<整数>、[開始/終了]） キュービック・ベジェ（<番号> 、<番号>、<番号>、<番号>）;
/ * パラメータ -線形：線形遷移。ベジェ曲線は、（0.0、0.0、1.0、1.0）と同等である - EASE：スムーズな移行。ベジェ曲線は、（0.25、0.1、0.25、1.0）と同等である -使いやすさで：低速から高速まで。ベジェ曲線は（0.42、0、1.0、1.0）に相当します - EASE-OUT：速いから減速します。ベジェ曲線は（0、0、0.58、1.0）と同等です-使いやすさに-OUT：遅いから速いし、その後遅いに。ベジェ曲線は（0.42、0、0.58、1.0）（最高）と等価である （1、スタート）：開始-STEP -同等の手順を - STEP-エンド：ステップに相当（1、終了。） -ステップ（<整数>、[開始|終了 ]]）:? ステップ関数は、の二つのパラメータ受け付ける 最初のパラメータを正の整数、機能を指定したステップ数でなければなりません 第二のパラメータ：あるいは、デフォルト値エンド -キュービックベジエ- （<番号>、<番号>、<番号>、<番号>）： ベジェ曲線の特定のタイプ、[0にするための4つの値、 1]の間隔* /
-
遷移遅延
トランジションエフェクトを定義するために開始した場合
ディレイ・トランジション：時間;
/ * パラメータ説明 -遷移指定したミリ秒または秒数まで待機する -デフォルト値は0です* /
-
複雑な文言を移行
遷移：プロパティ時間タイミング機能遅延;
-
実用化
DIV { 幅：100pxに。 高さ：75px ; 背景：＃1 0b2632。 遷移プロパティ：幅 ; 遷移期間：1秒。 遷移タイミング機能：使いやすさでアウト ; 遷移遅延時間：0.5秒。 / * サファリ* / -webkit-遷移プロパティ：幅。 -webkit-遷移期間：1秒。 -webkit-遷移タイミング機能：使いやすさでアウト ; -webkit-遷移遅延時間：0.5秒。 } DIV：ホバー { 幅：200pxの。 }
二、CSS3アニメーション
-
キーフレーム
キーフレームは、アニメーションのキー位置アニメーションを決定するために、すべての変更を指定することができます
animationnameの@keyframes { キーフレームセレクタ{ - CSS -スタイル; } } / * パラメータ animationname：項目が書き込まれる、アニメーションの定義の名前 キーフレームセレクタ：項目が書き込まれる、からアニメーション、0-100％の割合時間（0 ％）、（100％）に CSS-スタイル：アイテムを書き込みます、一つ以上の正当なCSSスタイル属性 @keyframesがでスタイルに分けて書かれたanimationname / *
-
アニメーション名
引当金は、セレクタキーフレームの名前にバインドする必要があります
名前-アニメーション：keyframename /なし; / * パラメータ keyframename：セレクタのキーフレームにバインドする名前を指定します。 どれも：なしアニメーション（動画はカスケードをカバーするために使用することができます）が存在しない指定しない *は/
-
アニメーションの継続時間
これは、秒またはミリ秒単位でアニメーションの完了に時間がかかります
DURATION-アニメーション：時間; / * パラメータの 時間は、それがアニメーションを完了するのにかかる時間を指定します。デフォルト値は何のアニメーションを意味しない、0であります * /
-
アニメーションのタイミング機能
アニメーションカーブの所定の速度
アニメーション・タイミング機能：EASE /リニア/ EASEイン/ EASE-OUT / EASE-で-OUT STEP-スタート/ STEP-エンド/ステップ（<整数>、[開始/終了]） キュービック・ベジェ（<番号> 、<番号>、<番号>、<番号>）;
/ * パラメータ -線形：線形遷移。ベジェ曲線は、（0.0、0.0、1.0、1.0）と同等である - EASE：スムーズな移行。ベジェ曲線は、（0.25、0.1、0.25、1.0）と同等である -使いやすさで：低速から高速まで。ベジェ曲線は（0.42、0、1.0、1.0）に相当します - EASE-OUT：速いから減速します。ベジェ曲線は（0、0、0.58、1.0）と同等です-使いやすさに-OUT：遅いから速いし、その後遅いに。ベジェ曲線は（0.42、0、0.58、1.0）（最高）と等価である （1、スタート）：開始-STEP -同等の手順を - STEP-エンド：ステップに相当（1、終了。） -ステップ（<整数>、[開始|終了 ]]）:? ステップ関数は、の二つのパラメータ受け付ける 最初のパラメータを正の整数、機能を指定したステップ数でなければなりません 第二のパラメータ：あるいは、デフォルト値エンド -キュービックベジエ- （<番号>、<番号>、<番号>、<番号>）： ベジェ曲線の特定のタイプ、[0にするための4つの値、 1]の間隔* /
-
アニメーションの遅延
アニメーションの開始までの遅延の規定
ディレイ・アニメーション：時間; / * パラメータ オプション。アニメーションは、秒またはミリ秒単位で開始待ち時間の前に定義されます。デフォルト値は0である 値が負の場合、アニメーションはすぐに開始しますが、アニメーションを入力するために、適切な時間をスキップします * /
-
アニメーションの繰り返しカウント
アニメーションを再生する必要があり、指定された回数
反復-COUNT-アニメーション：無限/ <番号>; / * パラメータ <番号>はデフォルト値「1」である数であり、無限ループの無限の数 * /
-
アニメーションの方向
規定は逆回しアニメーションを再生する必要があるかどうか
アニメーション方向：ノーマル/リバース/代替的/代替反転/初期/継承; / * パラメータ 正常：正常方向 逆：実行反対 交互に：反応後シンジェンタを、連続的に交互に実行する（無限依存する必要が） 代替リバース：最初の抗nは、継続的に交互に実行します（無限に依存する必要があり） * /
-
アニメーションフィルモード
アニメーションスタイルの規定が完了した場合や、アニメーションを再生するには開始されません遅延がある場合には、要素に適用されます
フィル-MODE-アニメーション：なし/フォワード/後方/両方/初期/継承を; / * パラメータ なし：デフォルト。オブジェクトのアニメーションの状態を超えて設定されていない 転送：アニメーションの終わりの状態に設定し、オブジェクトの状態 後方：状態にオブジェクトの状態を設定し、ムービーの開始時に 両方：状態にオブジェクトの状態を設定し、またはアニメーションの最後の始まり * /
-
アニメーションプレイ状態
規制やアニメーションの実行を一時停止
ステート・アニメーションが再生：一時停止/ランニング; / * パラメータは、 一時停止：アニメーションを一時停止するように指定します 実行中のアニメーションを指定し、デフォルト値：ランニングを / *
-
アニメーション
コンポジット言葉遣い
アニメーション：関数名のDURATIONタイミング遅延反復カウントモード方向フィル・再生状態; / * パラメータ説明 デフォルトのEDITORIALの継続時間 * /
-
変更されます
強化されたページのレンダリング性能、アニメーションの事前要素に何をすべきか、ブラウザを伝え、適切な最適化設定を準備するために、事前にブラウザを聞かせて
変更-でウィル：オート/スクロール位置/コンテンツ/ <カスタムのident> / <animateable-特集>; / * パラメータ の自動：このキーワードは、任意のヒューリスティックが通常行われているに特段の意図は、それが適用されないことを示し、最適化の スクロール位置：要素のスクロール位置変更する意志を表し た内容を：あなたは要素の内容を変更することを示し 、<カスタムのident>：明示的に指定された名前の属性を変更するために指定された <animateable-機能>：一部の特性値をアニメーション化することができ、等左、上、マージンなど * /
互換性：IE13 +、FireFox47 +、Chrome49 +、Safari9.1 +、Opera39 +、IOS9.3 +、Android52 +
-
実用化
DIV { 幅：100pxに。 高さ：100pxに。 背景：黒 ; } DIV：ホバー { アニメーション：myfirst 5S。 アニメーション--o：myfirst 5S ; / * オペラ* / -moz-アニメーション：myfirst 5S ; / * Firefoxの* / -webkit-アニメーション：myfirst 5S ; / * Safariとクローム* / } @keyframes myfirst { 0％{背景：黒 ;} 25％ { 背景：青 ;} 50％ { 背景：赤 ;} 100％ { 背景：白 ;} } @ -moz-キーフレームmyfirst / * Firefoxが* / { 0％{背景：赤色 ;} 25％ { 背景：黄色 ;} 50％ { 背景：青 ;} 100％{ 背景：緑 ;} } @ -webkit-キーフレームmyfirst / * Safariとクローム* / { 0％{背景：赤 ;} 25％ { 背景：黄色 ;} 50％ { 背景：青 ;} 100％ { 背景：グリーン ;} } @ -o-キーフレームmyfirst / * オペラ* / { 0％{背景：赤 ;} 25％ {背景：黄色 ;} 50％ { 背景：青 ;} 100％ { 背景：緑 ;} }