CSS3 の変換とトランジション、アニメーション、および関連プロパティの簡単な紹介

1. 変換

transform: 要素オブジェクトを回転、拡大縮小、平行移動、傾斜、行列変換できます。
例:

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩阵变形*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*透视*/
perspective(length);

transition: トランジション属性

transition: トランジション効果の CSS 属性名 トランジション効果の継続時間 速度エフェクトのスピードカーブ

transition: property duration timing-function delay;
/*示例*/
transition:1s ease all;
-webkit-tansition:1s ease all;
-moz-transition:1s ease all;
-o-transition:1s ease all;

rotate(): 二次元空間回転要素。

要素にパースペクティブ値が設定されている場合、rotate3d() を使用して 3 次元空間での回転を実現できます。

rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/
rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/
rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/

scale()

scaleX(<number>)/*只在X轴（水平方向）缩放元素*/
scaleY(<number>)/*只在Y轴（垂直方向）缩放*/
scaleZ(<number>)/*只在Z轴缩放，前提：元素设定透视值*/

translate([,]): 移動、変位量です。

translateX(<translation-value>);/*只在X轴（水平方向）移动*/
translateY(<translation-value>);/*只在Y轴（垂直方向）移动*/
translateZ(<translation-value>);/*只在Z轴移动，前提：元素设置透视值*/

skew(): スキュー

skewX(<angle>);/*只在X轴（水平）倾斜*/
skewY(<angle>);/*只在Y轴（垂直）倾斜*/

matrix(a,c,e,b,d​​,f): 行列の変形、c と e の値はサイン値またはコサイン値で表されます。

a：scaleX(); X軸のスケーリングを表します
c：skewY(); Y軸の傾き
e：skewX(); 移動
f：translateY() Y軸の移動

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);

perspective()

.wrap{
    perspective:1000px; 
}
.wrap .child{
    transform:perspective(1000px);
}

2. トランジション

transition-property

: トランジションプロパティ

transition-property:all;/*针对所有元素都有过度效果*/
transition-property:none;/*没有元素有过度效果*/
transition-property:ident;/*指定css属性有过度效果，例如width*/

transition-duration: トランジション時間

transition-delivery : 遅延時間、負の数値の場合、過剰なアクションが表示され始めますこの時点から、前のアクションは切り捨てられます。

transition-timing-function: 過剰な効果、デフォルトの緩和。

transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/
transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/
transition-timing-function:ease-in;/*渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数*/
transition-timing-function:ease-out;/*渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数*/
transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/
transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/

3. アニメーション

animation-name

: アニメーション名。複数の属性値が指定されている場合、アニメーション名は @keyframes ルールと組み合わせて使用​​する必要があります。カンマで区切ってください。

@keyframes

は名前空間に相当し、その後に名詞が続きます。クラス内のアニメーション名が対応する名前を定義している場合、アニメーションを実行できます。アニメーションを定義する場合、from および to キーワードを直接使用して、ある状態から別の状態に遷移できます。

.animation_name{
    left:0;
    top:100px;
    position: absolute;
    -webkit-animation: 0.5s 0.5s ease infinite alternate;
    -moz-animation: 0.5s 0.5s ease infinite alternate;
    -webkit-animation-name:demo;
    -moz-animation-name:demo;
}
@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}
@-webkit-keyframes demo1{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

animation-duration

: アニメーション時間

animation-timing-function

: 再生方法、値は次のとおりです: ease: 緩和効果、cubic-bezier(0.25,0.1,0.25 と同等) 、1.0) 関数、つまり 3 次ベジェです。

linear: リニア効果

ease-in: フェードアウト効果
ease-out: フェードアウト効果
ease-in-out: フェードアウト効果
step-start: すぐにアニメーション終了状態にジャンプ
step-end : アニメーションの実行時間が終了するまでアニメーションの開始状態を維持し、すぐにアニメーションの終了状態にジャンプします
step([,[start | end]]?): 最初のパラメータ番号は指定された間隔番号、つまりアニメーションですn 個のステップに分割されます。フェーズド表示、2 番目のパラメータのデフォルトは end、最後のステップの状態を設定します、start は最後の状態、end は最初の状態です（設定がanimation-fill-modeの効果と競合する場合）。 、animation-fill-modeを使用 アニメーション終了状態に設定します。
cubic-bezier(,,,): 特殊な 3 次ゼベル曲線エフェクト

animation-delay

: 再生開始時間

animation-iteration-count

: 再生時間、値が無限であることは無限ループ再生を意味します

anime-direction

: 再生方向、値は次のとおりです: normal: 通常の方向

reverse: アニメーションは逆方向に実行され、方向は常に通常と同様になります

alternate: アニメーションは交互に順方向と逆方向に循環します モーション

animation -fill -mode

: 再生後の状態、値: none: デフォルト値、未設定

forwards: 終了後アニメーションが終了した状態を維持

backwards: 終了後アニメーション開始時の状態に戻る
両方: 終了後、前方へ、後方への 2 つのルール
animation-play-state: オブジェクト アニメーションの状態を取得または設定します。値:
running: デフォルト、モーション
paused: 一時停止

4 つの関連属性

transform-origin

: 変換の基準点である変換原点は、デフォルトで要素の中心点になります。パラメータは 2 つあり、パラメータ 1 は横座標、パラメータ 2 は縦座標です。 percentage: パーセントを使用して座標値を指定します。負の値も可能です。

length: 長さを使用して座標値を指定します。負の値も可能です。

左中央右: 水平方向の値
上中央下: 垂直方向の値

perspective-prigin

: パースペクティブ 3D 要素の X 軸と Y 軸上で定義される原点により、3D 要素の下部の位置を変更できます。この属性は、要素自体ではなく、要素の子、つまりパースペクティブになります。 注: この属性は、3D 変換された要素にのみ影響するパースペクティブ属性と一緒に使用する必要があります。 値: パーセンテージ、長さ、左、中央、右、上、中央、下

backface-visibility

: コンテンツの裏側を非表示にします。デフォルトでは、変換されたコンテンツは表示されます。裏面の場合 - 表示設定が非表示に設定されている場合、回転後にコンテンツが非表示になり、回転後に表面が表示されなくなります。 値: 表示、非表示transform-style: 3D レンダリング、3D 空間で埋め込み要素をレンダリングする方法を設定します。 2 つの値があります:
flat: すべてのサブ要素が 2D 平面上にレンダリングされます
preserve-3d: 3D 空間を保持します。

以上がCSS3 の変換とトランジション、アニメーション、および関連プロパティの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。