【CSS 3アニメーション】遷移transition、変換transformとアニメーションアニメーションアニメーション

このノートは「千古壹号」のGitHubプロジェクトに基づいています.https://github.com/qianguyihao/web非商業用途は自由に転載して、署名を維持して、出典を明記します!
文書ディレクトリ

0.主な内容

1.遷移transition

1.1基礎

1.2例:商品詳細

2. 変換transform

2.1基礎

2.2 2 D変換

2.2.1スケールscale

2.2.2変位translate

2.2.3回転rorate

2.2.3例:小ロケット

2.2.4例:トランプ

2.3 3 D変換

2.3.1回転rotateX、rotateY、rotateZ

2.3.2変位translateX、translateY、translateZ

2.3.3例:サイコロ(難点)

3.アニメーション

3.1基礎

3.2例:クロックアニメーション

3.3例:魚は箱で泳いで、箱は右に

移動します.

4.補足

0.主な内容
1.遷移:transition(米[trˈzɪʃn] ) 2.変換へんかん:transform transform

2 D変換

3 D変換

3.アニメーション:animation(美[ˌænɪˈmeɪʃn])
1.遷移transition
1.1基礎

目的:変更をそれほど突っ張らずにゆっくり行い、一般的に箱に入れ、マウスサスペンション偽類と一緒に使用するが、サスペンション前の箱内に設置する.サスペンション後の箱は変更後のスタイルを設定します.

/*all    ，      、 ，1s      。linear      ，0s         */
transition: all 1s linear 0s;

注意:1.元の箱の位置は変わらず、マウスのサスペンション後にサスペンションに設置された幅によって拡張か収縮かを決定し、拡張すると右と下を正方向に変化し、収縮すると逆方向になる.2.マウスが離れた後も、設定した移行条件に従って元の状態に戻る.3.一般的には、最初の2つのパラメータのみを設定します.

1.2例:商品詳細

需要1:隠し始め、サスペンション時に

が現れる

解1:開始:親箱:overflow:hidden;//余分な部分を隠す.span部分は絶対位置決めを設定し、高さは80 pxであるが、底部-80 pxに位置決めされ、親ボックスが非表示になっているため見えない.次に、サスペンション時に絶対位置を底部から0 pxに設定すると、現れます.変更が突然でないため、サスペンション前の**span([sp

需要2:親ボックスをクリックし、全体を上に移動します.

解2:絶対位置決めを設定し、上部0 pxから-5 pxに変更します.サスペンション前の親ボックスにも遷移が設定されています.サスペンション後に次のシャドウ効果を設定できます:

box-shadow: 0 0 15px #AAA;

2.transformの変換
2.1基礎
1.転換はサスペンション、移行を結合する必要がある.2.変換は2 D変換、3 D変換を含む:

2 D変換:スケールscale([ske]ɪl]),変位translate([trénz]ˈleɪt]),回転rotate([ˈroʊteɪt])

3 D変換:回転rotateX、rotateY、rotateZ、変位translateX、translateY、translateZ

3.複数の属性を組み合わせて使用できます.
2.2 2 D変換
2.2.1スケールscale

一般的に左上部は、位置決め効果を変更しない限り、位置を変更しない.そのため、移行は他の箱を押し出す可能性があります.ただし、スケールは他のボックスには影響しません.

スケールは遷移、サスペンションと組み合わせて使用する必要があり、水平が2倍に拡大し、垂直方向が半分に短縮されると、サスペンション後のcssは以下のように設定することができる:

  transform: scale(2, 0.5);

2.2.2変位translate

幅の半分を水平方向に左にシフト、高さの半分を上にシフトすると、

というコードが設定.

transform: translate(-50%, -50%);

2.2.3回転rorate

回転方向:上下を始点として時計回りに

回転する.

 transform: rotate(45deg); 

2.2.3例:小ロケット

初期状態:絶対位置決めを設定し、変位位置と角度を設定し、サスペンション前後の角度が同じであるため、回転の効果はなく、ロケット角度だけが45度である.遷移設定:transition:all 1 s ease-in;ここでease-inは加速を表す.

transform:translate(-600px ,200px) rotate(45deg);

マウスをページにぶら下げた後(ロケットの初期位置が見えないため)、rocketの設定は以下の通りです.rocketはロケット画像のclassで、絶対位置決めが設定されているため、幅の高さを設定することができます.

  body:hover .rocket{
            transform:translate(500px,-500px) rotate(45deg);
        }

2.2.4例:トランプ

トランプは初期状態で重なるため、各図が箱から距離0である絶対位置決めが必要である.

箱底部を座標原点とし、変換(回転)原点

とする.

 transform-origin: center bottom;

親ボックスをマウスでサスペンションした後、画像ごとに異なる回転角度を設定すると、トランプ盤が扇形に展開されます.

サスペンションは、遷移のオブジェクトを選択することも、親

を選択することもできる.
2.3 3 D変換
2.3.1回転rotateX、rotateY、rotateZ

回転方向:右、下はそれぞれx、y軸正方向、z軸垂直ページは外向きが正方向、左手親指は正方向、残りの指は曲がり、曲がり方向は回転方向である.

x軸周りの回転コードは以下の通りであり、残りは類似している.

transform: rotateX(360deg);

z軸回転は、サスペンション前に親ボックスに透視現象を加える必要があります.そうしないと、役に立ちません.

perspective: 200px;

2.3.2変位translateX、translateY、translateZ

transform: translateZ(100px);

z軸が止まる前の親ボックスにパースビューを追加します.
2.3.3例:サイコロ(難点)

サスペンションを追加する必要はなく、自動的に変換されます.従って、各divに対して回転により角度を変える、合計6個のdivが親ケースに格納される.boxでは、主に親の箱です.boxアニメーション効果を設定します.

アニメーション関数xzを設定:0%から100%に回転する位置、すなわちxとy軸が360度

回転したことを示す.

 @keyframes xz {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

.box設定

transform-style: preserve-3d;//     3D  
animation: xz 8s linear infinite;//      ：    ，    ，  （  ），    。      2   

左右div設置回転中心はそれぞれ水平左と水平右であり、例えば:

  transform-origin: left;

3.アニメーション
3.1基礎

親ボックスでアニメーション関数が呼び出され、オブジェクトが挿入する背景図である場合、その背景図は息子

である.

@keyframes設定関数では、前のグループにアニメーションを設定したり、複数のグループにアニメーションを設定したりできます.例:

 0% {}
 25%{}
 ······
 100%{}

の変位内容は座標数であり、例えば(500 px,0)に変位する位置

を示す.

 transform: translateX(500px) translateY(0px);

3.2例:クロックアニメーション

の3番目のパラメータはsteps(60)に設定され、設定時間内に60ステップで到達することを示す.振り子のように、関数部分は

です.

 0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }

3.3例:魚は箱で泳いで、箱は右に移動する

html:divを2つ設定し、親.sharkBox,子.shark

需要1:魚が箱を泳いでいる

1 .shark内に背景図を挿入すると、背景図の父親になるので、アニメーション関数を設定します.

height: 270px; /*             */
animation: sharkRun 1s steps(8) infinite; 

2アニメーション関数:270*8=2160 px;

 0% {
            }
            100% {
                background-position: left -2160px; /*      ，        ？ */
            }

需要2:箱を右に移動

1 .sharkBoxがアニメーション関数を呼び出す

 animation: sharkBoxRun 10s linear infinite;

2アニメーション関数

 0% {
                transform: translateX(-600px);
            }

            100% {
                transform: translateX(3000px);
            }

4.補足

transition第3パラメータはlinearのほか、ease減速;ease-in加速;ease-out減速;ease-in-out先減

transitionの1番目のパラメータはallで、すべての属性に幅と背景色などを含むすべての遷移

である.