過渡動畫：transition屬性《Web前端基礎(chǔ)》課程過渡動畫案例任務展示第二部分Knowledge過渡屬性添加動畫效果一CSS的transition允許CSS的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值。transition屬性是個復合屬性，它包括以下幾個子屬性：transition-property：規(guī)定設(shè)置過渡效果的css屬性名稱（如：width,height,color,background-color等）1.transition屬性none

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

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

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

transition-duration

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

過渡動作會延遲觸發(fā)0

默認值負數(shù)

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