CSS3の変形、遷移分析、アニメーション、関連プロパティ

CSS3の変形、遷移分析、アニメーション、関連プロパティ

変形

変換、移動、傾斜スキュー翻訳、要素、オブジェクト、ズームスケールを回転させるように回転させることができる、マトリックス修正行列:。
例:

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

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

トランジション:トランジション効果の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;
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯

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

三次元空間の要素が設定された斜視値利用可能ROTATE3D()効果ローテーション。

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

規模()

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

翻訳([、]) 変位の移動量。

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

スキュー() 傾き

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

行列(A、C、E、B、D、F) マトリックス修飾、C、Eが正弦または余弦値の値で表されます。

; AはX軸スケーリングscaleXプロパティ()を表す
skewY(); Y軸チルト:C
E:skewX値(); X軸傾斜磁場
B:scaleYのを(); Y軸はスケーリング
D:移動X()をX軸
F:移動Y() Y軸移動

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

視点():視点

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

第二に、移行

プロパティの遷移:過度のプロパティ

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

遷移期間:時間にわたって
遷移遅延:遅延時間が負である操作は切り捨てされる前に、動作は、時刻の表示ポイントからやり直します。
遷移タイミング機能:トランジション効果、デフォルトのしやすさ。

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;/*特殊的立方贝塞尔曲线效果*/

第三に、アニメーション

名前アニメーション:複数の属性値がカンマで区切られている場合、アニメーション@keyframesの名前によって定義されたアニメーションの名前は、@keyframesルールに使用されなければなりません。

@keyframesクラスのアニメーション名は、対応する名前を定義する場合、名詞に続く名前空間に相当するが、アニメーションを実行することができます。キーワードは別の状態への1つの状態遷移から、から、およびアニメーションの定義に直接使用することができます。

.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;}
}
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯

DURATION-アニメーション:アニメーション時間

タイミング機能-アニメーション:再生モード、次の値:

容易:立方ベジェ(0.25,0.1,0.25,1.0)関数は、両方の立方ベジェに相当緩和の効果を、。
リニア:リニア影響
緩和イン:効果フェード
やすアウト:効果はフェード
フェード効果フェード:簡単・イン・アウト
ステップスタートを:すぐにアニメーションの終了状態にジャンプし
、アニメーションが開始状態保持:ステップエンドアニメーションの最後の実行時間は、直ちにアニメーション状態の終わりにジャンプ
|工程([終了、[開始 :]]) 最初のパラメータはステージショーをアニメーション番号を指定した間隔の数は、n個のステップに分割され、第二の終わりのためのデフォルトパラメータ、状態の設定の最後のステップ、状態の終わりに開始し、状態の冒頭のように終わり、アニメーション・フィル・モードに紛争と設定したアニメーションフィルモードの効果は、アニメーション状態の最後に設定されている場合。
立方ベジエ(,,,):特殊効果三次曲線のSiebel

遅延-アニメーション:時間の再生を開始します

アニメーションの繰り返しカウントは、プレイ回数、値が無限大であるとき、無限ループを示しています。

方向アニメーション:再生方向、値:

正常:正常方向の
逆:逆にアニメーションラン、法線方向とは常に類似している
代替:アニメーションサイクルの正及び負の動きを交互に

フィル-MODE-アニメーション:プレイの状態、値:

なし:デフォルト値は、設定されていない
転送:アニメーションの終了後の状態を維持するために、
後方:状態の開始後のアニメーションへの復帰
の両方を:前後の終了後に二つの規則に従うことを
アニメーションプレイ状態:オブジェクトのアニメーションを取得または状態を設定値:
ランニング:デフォルト、スポーツは、
一時停止:一時停止

第四に、関連のプロパティ

原点変換:変形原点、基準点の変換、デフォルトでは要素の中心点です。二つのパラメータ、横軸、二つのパラメータの縦軸としてのパラメータがあります。

パーセンテージ:パーセント値、または負の座標指定
の長さ:指定された長さの値、または負の座標
左右中心を水平方向値
上部中央底:垂直方向の値を

prigin透視:起源の斜視図は、X軸とY軸の3次元要素で定義され、それは要素、斜視図ではなく、要素自体の子要素であるプロパティを定義する、3次元要素の底部の位置を変更することを可能にします。
メモ:このプロパティを使用するには、一緒に使用しなければならない、とプロパティの視点は、3D変換素子にのみ影響します。
値:パーセント、長さ、左、中央 、右、上、中央、下

背面視認性:背面-表示設定が隠された場合、コンテンツの逆変換がまだ表示された後に背面の隠されたコンテンツ、バックは、デフォルトで表示され、回転後の隠しコンテンツ、フロントはもはや回転した後に表示されません。
値:目に見える、隠された
トランスフォームスタイル:3Dレンダリング、3D空間に埋め込まれてどのように描画するかの要素を設定し、二つの値があります:
フラット:すべての子要素は、2次元平面上にレンダリングされ
保存-3dは:3Dスペースが確保さ

おすすめ

転載: blog.51cto.com/14458119/2424187