CSS3アニメーションとtransition_html/css_WEB-ITnose

transform: 2D または 3D 変換を使用する前に、transform-style を使用して変換のタイプ、preserve-3d またはpreserve-2d を宣言する必要があります

attribute

translate():

translate() メソッドを通じての場合、要素は、指定された左 (x 座標) および上 (y 座標) の位置パラメーターに基づいて、現在の位置の移動から変更されます。

rotate():

rotate() メソッドにより、要素は指定された角度だけ時計回りに回転されます。負の値が許可され、要素は反時計回りに回転します

3D では、rotateX(): 画面に向かって回転する例外があります。rotateY(): 画面上で左右に回転します。 2D のrotate()、画面上で時計回りまたは反時計回りに回転します。

scale():

scale() メソッドを通じて、指定された幅 (X 軸) と高さ (Y 軸) パラメータに従って、要素のサイズが増加または減少します

skew():

スルーskew() メソッドでは、指定された水平線 (X 軸) と垂直線 (Y 軸) のパラメーターに従って、要素が指定された角度を反転します。

transition: Flash アニメーションや要素を使用せずに、要素があるスタイルから別のスタイルに変換するとき。 JavaScript 別のスタイルの要素に効果を追加する場合は、次の 2 つのことを指定する必要があります:

効果を追加する CSS プロパティを指定します

効果の継続時間を指定します

例:transition:width 2s;スタイル: イーズ スムーズな変化

線形均一変化

アニメーションを定義し、アニメーションを使用してアニメーションを呼び出す

@keyframe myfirst{

from{}//Start Effect

to{}//End エフェクト

}

または @keyframe myfirst{

0%{} / /アニメーションの進行状況をパーセンテージで表すこともできます

30%{}

70%{}

100%{}

}

anime:

animation-name: myfirst; //アニメーション名

animation-duration : 5s;//アニメーション継続時間

animation-timing-function: liner;//アニメーション変更効果、transition

animation-delay: 2s; //アニメーション遅延再生時間

animation-iteration-count:infinite;//無限定義 無線ループの場合

animation-direction:alternate;//次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「通常」です。

animation-play-state:running//アニメーションが実行中か一時停止中かを指定します。デフォルトは「実行中」です。