單元5

CSS3新特性5.6

CSS3動效新特性主要內容C

O

N

T

E

N

T

SPART

01CSS3過渡效果PART

03CSS3動畫效果PART

02CSS3變形效果CSS3過渡效果CSS3提供了強大的過渡屬性transition，利用該屬性可以在不使用Flash動畫或者

Javascript腳本的情況下，為元素從一種樣式到另一種樣式的變化添加中間過渡效果。transition:

property

duration

timing-function

delay;子屬性transition-property描述指定應用過渡效果的CSS屬性的名稱，當這些屬性的屬性值發生改變時，將應用過的變化效果。transition效果需要指定多少秒或毫秒才能完成。transition-durationtransition-timing-functiontransition-delay指定過渡效果執行速度變化的時間曲線。指定過渡效果執行之前需要等待的時間。CSS3過渡效果transition-timing-function屬性值說明【案例5.6.1】CSS3的過渡效果示例屬性值lineareaseease-inease-outease-in-out說明動畫以以勻速執行。動畫以慢速開始，變快之后再慢速結束。動畫以以慢速開始。動畫以以慢速結束。動畫以以慢速開始和結束。cubic-bezier(n,n,n,n)在cubic-bezier函數中自定義動畫執行速度，各參數是0至1之間的數值。CSS3變形效果CSS3新增的transform屬性通過一系列變形函數，操控元素進行平移、旋轉、縮放和傾斜等變形，包括2D變形3D變形。none（默認值）：表示不進行變形。transform-function：設置變形函數，可以設置1個或多個變形函數，若有多個變形函數，之間以空格分隔。transform:

none|transform-functions;CSS3變形效果常用2D變形函數函數 描述【案例5.6.2】CSS3的2D變形效果示例translate()功能：重新定義元素的二維坐標，實現元素平移的效果。語法：transform:translate

(x-value,y-value);scale

()功能：縮放元素大小，包含兩個參數，分別用來定義寬度和高度的縮放比例。語法：transform:scale(x-axis,y-axis);rotate

()功能：在二維平面內將元素旋轉一定的角度，正值順時針旋轉。負值逆時針旋轉。語法：transform:rotate(angle);skew

()功能：將元素沿著X軸或Y軸進行一定角度的傾斜。語法：transform:skew(x-angle,y-angle);CSS3變形效果常用3D變形函數【案例5.6.3】CSS3的3D旋轉效果示例函數translate3d(x,y,z)translateX(x)translateY(y)translateZ(z)scale3d(x,y,z)scaleX(x)scaleY(y)scaleZ(z)rotate3d(x,y,z,angle)rotateX(angle)rotateY(angle)rotateZ(angle)matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)描述定義3D平移定義圍繞X軸的3D平移定義圍繞Y軸的3D平移定義圍繞Z軸的3D平移定義3D縮放定義圍繞X軸的3D縮放定義圍繞Y軸的3D縮放定義圍繞Z軸的3D縮放定義3D旋轉定義圍繞X軸的3D旋轉定義圍繞Y軸的3D旋轉定義圍繞Z軸的3D旋轉綜合定義3D變形，使用16個值的4x4矩陣CSS3動畫效果在CSS3中，使用@keyframes規則創建動畫。@keyframes

animationname

{keyframes-selector{css-styles;}}語法animationname：當前動畫的名稱，它將作為調用動畫時動畫的標識，不能為空。keyframes-selector：關鍵幀選擇器，指定當前關鍵幀在整個動畫過程中的位置，值可以是from和to、或者百分比。其中，from和0%效果相同(表示動畫的開始)，

to和100%效果相同{表示動畫的結束)。css-styles：定義當前關鍵幀對應的動畫狀態，由若干

CSS樣式屬性刻畫，各屬性間用分號分隔。CSS3動畫效果在CSS3中，使用animation屬性調用@keyframes規則創建的動畫，它是一個復合屬性。animation:

name

duration

timing-function

delay

iteration-count

direction

fill-mode

play-state;子屬性animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-count說明指定要綁定到選擇器的關鍵幀的名稱動畫指定需要多少秒或毫秒完成設置動畫將如何完成一個周期設置動畫在啟動前的延遲間隔。定義動畫的播放次數。animation-directionanimation-fill-mode