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

推移

遷移属性は、速記プロパティです

4つのプロパティは、主にあります。

1、トランジション-property属性は、アプリケーションのname属性は、すべてのデフォルトのトランジションであることを指定し、

既定の時間によって定義される2、遷移期間の遷移は0であります

図3に示すように、遷移タイミング機能の速度が影響を指定し、線状の一般的な値は：最初から最後まで同じ速度であり、デフォルト値は容易なことです

図4は、デフォルトが0のときの遷移遅延スタートは、トランジション効果を指定します

 

アニメーション

アニメーション要素は徐々に別のスタイル効果、所定の時間の割合の変更、または1つのスタイルから変更されていること

0〜100％に等しいからとするキーワード、

一般的に、我々は、セレクタの役割に似たアニメーションが続く@keyframes'アニメーションスタイルの名前を指定し、使用します

アニメーション-nameは@keyframesアニメーションの名前を指定します。

アニメーションを完了するために必要なアニメーション、持続指定した時間

アニメーションカーブのしやすさのアニメーションタイミング機能所定のデフォルトの速度

アニメーションは指定されたアニメーションの遅延は、デフォルトは0です

DIV 
{ 
    幅：100pxに。
    高さ：100pxに。
    背景：赤; 
    位置：相対; 
    アニメーション名：myfirst。
    アニメーションの継続時間：5秒。
    アニメーションのタイミング機能：リニア; 
    アニメーションの遅延：2S; 
    アニメーションの繰り返しカウント：無限。
    アニメーション方向：代替。
    アニメーションプレイ状態：実行されています。
} 

@keyframes myfirst 
{ 
    0％{背景：赤。左：0PX。上部：0PX;} 
    25％{背景：黄色。左：200pxの。上部：0PX;} 
    50％{背景：青; 左：200pxの。上部：200pxの;} 
    75％{背景：緑; 左：0PX。上部：200pxの;} 
    100％{背景：赤。左：0PX。上部：0PX;}
}

コードを変更することはCCTVのアニメーションによって学習することができ、divが規定@keyframesアニメーションを変更することで、ほぼすべてのアニメーションプロパティのが含まれています