css3新屬性(下篇)過渡 變換 動畫

2021-10-08 10:04:40 字數 3064 閱讀 4850

語法:

transition:transition-property  transition-duration   transition-timing-function transition-delay;
他有四個取值,分別解釋如下:

linear:線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease:平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in:由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out:由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out:由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

step-start:等同於 steps(1, start)

step-end:等同於 steps(1, end)

steps():接受兩個引數的步進函式。第乙個引數必須為正整數,指定函式的步數。第二個引數取值可以是start或end,指定每一步的值發生變化的時間點。第二個引數是可選的,預設值為end。

cubic-bezier():特定的貝塞爾曲線型別,4個數值需在[0, 1]區間內。

語法:

animation:這裡可以取八個值;
取值依次如下:

animation-name:檢索或設定物件所應用的動畫名稱(必需),並且必須與規則@keyframes配合使用,因為動畫名稱由@keyframes定義。

animation-duration:檢索或設定物件動畫的持續時間(必需)

animation-timing-function:檢索或設定物件動畫的過渡型別,取值和上面的過渡的取值一樣。

animation-delay :檢索或設定物件動畫延遲的時間(可選)

animation-iteration-count :檢索或設定物件動畫的迴圈次數(可選),特殊取值:infinite(無限迴圈)

animation-direction:檢索或設定物件動畫在迴圈中是否反向運動(可選),和迴圈次數配合使用。它的取值有四種:

normal:正常方向

reverse:反方向執行

alternate:動畫先正常執行再反方向執行,並持續交替執行

alternate-reverse:動畫先反執行再正方向執行,並持續交替執行

animation-fill-mode :檢索或設定物件動畫時間之外的狀態(可選)

animation-play-state :檢索或設定物件動畫的狀態。w3c正考慮是否將該屬性移除,因為動畫的狀態可以通過其它的方式實現,比如重設樣式。它的取值如下:

none:預設值。不設定物件動畫之外的狀態

forwards:設定物件狀態為動畫結束時的狀態

backwards:設定物件狀態為動畫開始時的狀態

both:設定物件狀態為動畫結束或開始的狀態

例如我們讓乙個div在原地變換顏色和它的樣式,**如下:

div

@keyframes a

25%50%

75%100%

}

效果可以自己執行看,這裡就不發效果圖了。

語法:

transform:後面跟需要的值;
它的取值主要有:

none:無轉換

2d轉換:

matrix(

):以乙個含六值的(a,b,c,d,e,f)變換矩陣的形式指定乙個2d變換,相當於直接應用乙個[a,b,c,d,e,f]變換矩陣

translate(

):指定物件的2d translation(2d平移)。第乙個引數對應x軸,第二個引數對應y軸。如果第二個引數未提供,則預設值為0

translatex(

):指定物件x軸(水平方向)的平移

translatey(

):指定物件y軸(垂直方向)的平移

rotate(

):指定物件的2d rotation(2d旋轉),需先有 <

' transform-origin '

> 屬性的定義

scale(

):指定物件的2d scale(2d縮放)。第乙個引數對應x軸,第二個引數對應y軸。如果第二個引數未提供,則預設取第乙個引數的值

scalex(

):指定物件x軸的(水平方向)縮放

scaley(

):指定物件y軸的(垂直方向)縮放

skew(

):指定物件skew transformation(斜切扭曲)。第乙個引數對應x軸,第二個引數對應y軸。如果第二個引數未提供,則預設值為0

skewx(

):指定物件x軸的(水平方向)扭曲

skewy(

):指定物件y軸的(垂直方向)扭曲

3d轉換和2d差不多:

matrix3d(

):以乙個4x4矩陣的形式指定乙個3d變換

translate3d(

):指定物件的3d位移。第1個引數對應x軸,第2個引數對應y軸,第3個引數對應z軸,引數不允許省略

translatez(

):指定物件z軸的平移

rotate3d(

):指定物件的3d旋轉角度,其中前3個引數分別表示旋轉的方向x,y,z,第4個引數表示旋轉的角度,引數不允許省略

rotatex(

):指定物件在x軸上的旋轉角度

rotatey(

):指定物件在y軸上的旋轉角度

rotatez(

):指定物件在z軸上的旋轉角度

scale3d(

):指定物件的3d縮放。第1個引數對應x軸,第2個引數對應y軸,第3個引數對應z軸,引數不允許省略

scalez(

):指定物件的z軸縮放

perspective(

):指定透視距離。

設定或檢索物件以某個原點進行轉換。該屬性提供2個引數值。如果提供兩個,第乙個用於橫座標,第二個用於縱座標。如果只提供乙個,該值將用於橫座標;縱座標將預設為50%。

css3新特性 過渡 動畫

目的是讓一些互動效果 主要是hover動畫 變得生動一些,不會顯得那麼生硬。css3 過渡是元素從一種樣式逐漸改變為另一種的效果,必須規定兩項內容 指定要新增效果的css屬性 持續時間。transition是以下四個屬性的簡寫 當需要同時給兩種css屬性新增過渡時,用逗號隔開 transition ...

CSS3屬性(過渡,2D變換,3D變換,動畫)

在css3中,我們如果不使用js 或者flash動畫,想要實現元素從a狀態變成b狀態,並且中間的過程可以被觀察到,那麼可以使用過渡屬性 transitiont ease 由快到慢 預設值 linear 勻速運動 ease in 加速運動 ease out 減速運動 ease in out 先加速後減...

CSS3動畫 過渡

css3過渡是元素從一種樣式轉換成另一種樣式。使用transition屬性 transition property 過渡的名稱 transition duration 過渡效果花費的時間 transition timing function 過渡效果的時間曲線 transition delay 過渡...