過渡動畫：transition屬性《Web前端基礎》課程過渡動畫案例任務展示第二部分Knowledge過渡屬性添加動畫效果一CSS的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。transition屬性是個復合屬性，它包括以下幾個子屬性：transition-property：規定設置過渡效果的css屬性名稱（如：width,height,color,background-color等）1.transition屬性none

沒有屬性會獲得過渡效果all

所有屬性都會獲得過渡效果property

自己定義過渡效果的css屬性名稱，多個名稱之間逗號分隔添加動畫效果一transition-duration：規定完成過渡效果需要多少秒或毫秒(如：1s,20ms),請始終設置

transition-duration

屬性，否則時長為0，就不會產生過渡效果。1.transition屬性單獨使用transition-property不會生效，必須配合transition-duration定義過渡時間一起使用添加動畫效果一transition-timing-function：指定過渡函數，規定速度效果的速度曲線1.transition屬性添加動畫效果一transition-timing-function：指定過渡函數，規定速度效果的速度曲線添加動畫效果一1.transition屬性transition-delay：指定開始出現的延遲時間正整數

過渡動作會延遲觸發0

默認值負數

過渡動作會從該時間點開始，之前的動作被截斷實例解析添加動畫效果一添加動畫效果一CSS3變形動畫《Web前端基礎》課程第一部分KnowledgeTransform屬性在CSS3之前，如果需要為頁面設置變形效果，需要依賴于圖片、Flash或JavaScript才能完成。繁瑣不方便CSS3出現后，通過transform屬性就可以實現變形效果。變形一在CSS3之前都需要依賴圖片、Flash或JavaScript才能完成。1.認識transform變形一1.認識transform2012年9月，發布了CSS3變形工作草案，這個草案包括了CSS32D變形和CSS33D變形。W3C組織CSS3變形平移旋轉縮放傾斜變形一現在，使用CSS3就可以實現這些變形效果1無需加載額外的文件2提高了網頁開發者的工作效率3提高了頁面的執行速度1.認識transform變形一CSS3的變形（transform）屬性可以讓元素在一個坐標系統中變形。基本語法格式transform：none|transform-functions;transform屬性的默認值為none，適用于內聯元素和塊元素，表示不進行變形。transform-function用于設置變形函數，可以是一個或多個變形函數列表。1.認識transform變形一transform-function函數matrix（）定義矩形變換，即基于X和Y坐標重新定位元素的位置。translate（）移動元素對象，即基于X和Y坐標重新定位元素。scale（）縮放元素對象，可以使任意元素對象尺寸發生變化，取值包括正數、負數和小數。rotate（）旋轉元素對象，取值為一個度數值。skew（）傾斜元素對象，取值為一個度數值。1.認識transform變形一2.2D轉換平移使用translate（）方法能夠重新定義元素的坐標，實現平移的效果。基本語法格式transform:translate（x-value,y-value）;x-value指元素在水平方向上移動的距離，y-value指元素在垂直方向上移動的距離。如果省略了第二個參數，則取默認值0。當值為負數時，表示反方向移動元素。變形一平移使用translate（）方法能夠重新定義元素的坐標，實現平移的效果。translate（）方法平移示意圖基點2.2D轉換變形一2.2D轉換平移案例一縮放scale()方法用于縮放元素大小，該函數包含兩個參數值，分別用來定義寬度和高度的縮放比例。基本語法格式transform:scale(x-axis,y-axis);x-axis和y-axis參數值可以是正數、負數和小數。正數值表示基于指定的寬度和高度放大元素。負數值不會縮小元素，而是反轉元素（如文字被反轉），然后再縮放元素。如果第二個參數省略，則第二個參數等于第一個參數值。2.2D轉換變形一縮放scale()方法用于縮放元素大小，該函數包含兩個參數值，分別用來定義寬度和高度的縮放比例。scale()方法縮放示意圖2.2D轉換變形一傾斜skew()方法能夠讓元素傾斜顯示，該函數包含兩個參數值，分別用來定義X軸和Y軸坐標傾斜的角度。基本語法格式transform:skew(x-angle,y-angle);參數x-angle和y-angle表示角度值，第一個參數表示相對于X軸進行傾斜，第二個參數表示相對于Y軸進行傾斜，如果省略了第二個參數，則取默認值0。2.2D轉換變形一傾斜skew()方法能夠讓元素傾斜顯示，該函數包含兩個參數值，分別用來定義X軸和Y軸坐標傾斜的角度。skew()方法傾斜示意圖2.2D轉換變形一旋轉rotate()方法能夠旋轉指定的元素對象，主要在二維空間內進行操作。該方法中的參數允許傳入負值，這時元素將逆時針旋轉。基本語法格式transform:rotate(angle);參數angle表示要旋轉的角度值。如果角度為正數值，則按照順時針進行旋轉，否則，按照逆時針旋轉。2.2D轉換變形一旋轉rotate()方法能夠旋轉指定的元素對象，主要在二維空間內進行操作。該方法中的參數允許傳入負值，這時元素將逆時針旋轉。rotate()方法旋轉示意圖2.2D轉換變形一中心點變形操作都是以元素的中心點為基準進行的，如果需要改變這個中心點，可以使用transform-origin屬性。基本語法格式transform-origin:x-axisy-axisz-axis;2.2D轉換變形一中心點transform-origin屬性包含三個參數，其默認值分別為50%50%0，各參數的具體含義參數描述x-axis定義視圖被置于X軸的何處。可能的