這篇文章給大家分享的是有關css動畫屬性怎么用的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)的客戶來自各行各業(yè),為了共同目標,我們在工作上密切配合,從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位,感謝他們對我們的要求,感謝他們從不同領域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領域包括網(wǎng)站設計、做網(wǎng)站、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。
1 transition(過渡)
使用語法:
transition: property duration timing-function delay;
參數(shù):
(1) property(設置過渡效果的css屬性名稱):none | all | property。none表示沒有屬性獲得過渡效果;all表示所有屬性都將獲得過渡效果;property表示css屬性列表,多個屬性用逗號( , )隔開。
(2) duration(設置完成過渡效果的時間):秒或毫秒(s/ms)。
(3) timing-function(設置效果速度的速度曲線):linear,規(guī)定以相同速度開始到結束,等價于cubic-bezier(0,0,1,1);ease,慢速開始,然后慢速結束,等價于cubic-bezier(0.25,0.1,0.25,1);ease-in,以慢速開始,等價于cubic-bezier(0.42,0,1,1);ease-out,以慢速結束,等價于cubic-bezier(0,0,0.58,1);ease-in-out,以慢速開始和結束,等價于cubic-bezier(0.42,0,0.58,1);cubic-bezier(n,n,n,n),在該函數(shù)定義自己的值,數(shù)值為0-1之間。
(4) delay(過渡效果何時開始):值多少秒后執(zhí)行過渡效果,如 2s ,表示2s后執(zhí)行。
2 transform
transform屬性應用于2D 或 3D轉換。該屬性允許我們能夠?qū)υ剡M行旋轉、縮放、傾斜、移動這四類操作。
使用語法:
transform: none|transform-functions;
參數(shù):
(1) none:定義不進行任何轉換,一般用于注冊掉該轉換。
(2) transform-functions:定義要進行轉換的類型函數(shù)。主要有:
旋轉(rotate):主要分為2D旋轉和3D旋轉。rotate(angle),2D 旋轉,參數(shù)為角度,如45deg;rotate(x,y,z,angle),3D旋轉,圍繞原地到(x,y,z)的直線進行3D旋轉;rotateX(angle),沿著X軸進行3D旋轉;rotateY(angle);rotateZ(angle);
縮放(scale):一般用于元素的大小收縮設定。主要類型同上,有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z),其中x、y、z為收縮比例。
傾斜(skew):主要用于對元素的樣式傾斜。skew(x-angle, y-angle),沿著x和y軸的2D傾斜轉換;skewX(angle),沿著x軸的2D傾斜轉換;skew(angle),沿著y軸的2D傾斜轉換。
移動(translate):主要用于將元素移動。translate(x, y),定義向x和y軸移動的像素點;translate(x, y, z),定義像x、y、z軸移動的像素點;translateX(x);translateY(y);translateZ(z)。
3 animation
該屬性主要用于設置動畫屬性。
使用語法:
animation: name duration timing-function delay iteration-count direction;
參數(shù):
(1) name:需要綁定到選擇器的keyframe名稱。
(2) duration:完成該動畫需要花費的時間,秒或毫秒。
(3) timing-function:動畫的運動速度曲線。linear,規(guī)定以相同速度開始到結束,等價于cubic-bezier(0,0,1,1);ease,慢速開始,然后慢速結束,等價于cubic-bezier(0.25,0.1,0.25,1);ease-in,以慢速開始,等價于cubic-bezier(0.42,0,1,1);ease-out,以慢速結束,等價于cubic-bezier(0,0,0.58,1);ease-in-out,以慢速開始和結束,等價于cubic-bezier(0.42,0,0.58,1);cubic-bezier(n,n,n,n),在該函數(shù)定義自己的值,數(shù)值為0-1之間。
(4) delay:設置動畫在開始之前的延遲。
(5) iteration-count:設置動畫執(zhí)行的次數(shù)。
(6) direction:是否輪詢反向播放動畫。normal,默認值,動畫應該正常播放;alternate,動畫應該輪流反向播放。
下面展示了這些元素的測試代碼:
transition/transform transitiontransform rotatetransform scaletransform skewtransform translatetransformtransition/transform animation
感謝各位的閱讀!關于“css動畫屬性怎么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!