CSS3中的變形和過渡與動畫和關聯屬性的簡單介紹

來源:互聯網
上載者:User

一、變形

transform:可以對元素對象進行旋轉rotate、縮放scale、移動translate、傾斜skew、矩陣變形matrix。
樣本:

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():二維空間旋轉元素。

若元素設定了perspective值,可用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軸旋轉*/

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(); X軸傾斜
b:scaleY(); Y軸縮放
d:translateX() X軸移動
f:translateY() Y軸移動

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

perspective():透視

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

二、過渡

transition-property:過度的屬性

transition-property:all;/*針對所有元素都有過度效果*/transition-property:none;/*沒有元素有過度效果*/transition-property:ident;/*指定css屬性有過度效果,例如width*/

transition-duration:過度時間
transition-delay:延遲時間,為負數時,過度動作會從該時間點開始顯示,之前的動作會被截斷。
transition-timing-function:過度效果,預設ease。

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;/*特殊的立方貝茲路徑效果*/

三、動畫

animation-name:動畫名稱,必須與規則@keyframes配合使用,因為動畫名稱由@keyframes定義,如果提供多個屬性值用逗號隔開。

@keyframes相當於一個命名空間,後面跟一個名詞,如果在class中的animation-name定義了與之對應的name就可以執行動畫。定義動畫時可直接使用關鍵字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)函數,既立方貝塞爾。
linear:線性效果
ease-in:漸顯效果
ease-out:漸隱效果
ease-in-out:漸顯漸隱效果
step-start:馬上跳轉到動畫結束狀態
step-end:保持動畫開始狀態,到動畫執行時間結束,馬上跳轉到動畫結束狀態
step([,[start | end]]?):第一個參數number為指定的間隔數,即把動畫分為n步階段性顯示,第二個參數預設為end,設定最後一步狀態,start為結束時的狀態,end為開始時的狀態,若設定與animation-fill-mode的效果衝突,以animation-fill-mode的設定為動畫結束狀態。
cubic-bezier(,,,):特殊的立方賽貝爾曲線效果

animation-delay:開始播放時間

animation-iteration-count:播放次數,取值為infinite時表示無限迴圈播放

animation-direction:播放方向,取值為:

normal:正常方向
reverse:動畫反向運行,方向始終與normal相仿
alternate:動畫會迴圈正反交替運動

animation-fill-mode:播放後的狀態,取值:

none:預設值,不設定
forwards:結束後保持動畫結束的狀態
backwards:結束後返回動畫開始時狀態
both:結束後可遵循forwards和backwards兩個規則
animation-play-state:檢索或設定對象動畫的狀態,取值:
running:預設,運動
paused:暫停

四、關聯屬性

transform-origin:變形原點,transform的參照點,預設為元素的中心點。有兩個參數,參數一為橫座標,參數二為縱座標。

percentage:用百分比指定座標值,可負
length:用長度指定座標值,可負
left center right:水平方向取值
top center bottom:垂直方向取值

perspective-prigin:透視原點,定義在X軸和Y軸的3D元素,允許改變3D元素的底部位置,定義該屬性時,它是一個元素的子項目,透視圖,而不是元素本身。
注意:使用該屬性必須和perspective屬性一起用,隻影響3D轉換的元素。
取值:percentage、length、left、center、right、top、center、bottom

backface-visibility:隱藏內容的背面,預設情況下背面可見,反轉後變換的內容仍然可見,當backface-visibility設定hidden時,旋轉後內容將隱藏,旋轉後正面將不再可見。
取值:visible、hidden
transform-style:3D呈現,設定內嵌的元素在3D空間如何呈現,有兩個值:
flat:所有子項目在2D平面呈現
preserve-3d:保留3D空間

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.