CSS3トランジションやアニメーション

、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％ { 背景：緑 ;} 
}