HTML5+CSS3

2021.6HTML5andCSS3第15章

變換、過渡與動畫變換DEMO過渡DEMO關鍵幀動畫DEMO第15章

變換、過渡與動畫

第15章

變換、過渡與動畫變換旋轉（rotate）縮放（scale）平移（translate）傾斜（skew）變換原點（transform-origin）第15章

變換、過渡與動畫旋轉（rotate）transform屬性有一系列不同的值，包括rotate、scale、translate、skew等。rotate提供了旋轉元素的功能，從0度到360度旋轉，正值表示順時針旋轉，而負值將使元素逆時針旋轉。默認的旋轉點是元素的中心點（50%,50%）。稍后我們將討論如何更改此默認旋轉點。第15章

變換、過渡與動畫縮放（scale）transform屬性的scale可以更改元素的外觀大小，縮放元素。它的值是一個縮放比例，默認縮放比例為1，因此，0到1之間的數(shù)值會使元素變小，而大于1的數(shù)會使元素變大。詳細來說，scale可以分為scaleX和scaleY，scaleX是縮放元素的寬度，而scaleY是縮放元素的高度。如果scale只有一個值，則同時作用于x軸和y軸。如果有兩個值，則第一個值作用于x軸，第二值作用于y軸。第15章

變換、過渡與動畫平移（translate）translate的工作原理類似相對定位，沿不同方向平移元素，而且不會中斷文檔流。translate的語法和scale類似，也可以分為translateX和translateY。如果translate只有一個值，則只作用于x軸。translateX表示水平方向平移，正值右移，而負值左移。translateY表示垂直方向平移，正值下移，而負值上移。移動的距離值可以是任何常規(guī)長度單位，最常見的是像素或百分比。第15章

變換、過渡與動畫傾斜（skew）transform屬性中最后一個是skew，它用于使元素在水平軸或垂直軸上變形。語法與scale和translate非常相似，也分為skewX和skewY。如果skew只有一個值，則只作用于x軸。skew值的單位是度（deg）。第15章

變換、過渡與動畫變換原點（transform-origin）transform-origin屬性可以接受一個或兩個值。如果僅指定一個值，則該值將同時作用于水平軸和垂直軸。如果指定了兩個值，則第一個用于水平軸，第二個用于垂直軸。變換原點的坐標值是相對于元素的左上角，例如(20px50px)表示變換原點距離元素左側20像素，且距離元素頂部50像素。它的值也可以用百分比或者關鍵詞，例如元素的左上角可以用(00)或者(topleft)，右下角可以用(100%100%)或者(bottomright)。第15章

變換、過渡與動畫DEMO第15章

變換、過渡與動畫過渡過渡（transition）使元素從一種樣式逐漸改變?yōu)榱硪环N的樣式，而動畫（animation）可以在不同的關鍵幀上設置多個過渡點?？梢岳斫鉃檫^渡是一種弱化的動畫。使用過渡需要滿足兩個條件：元素必須具有狀態(tài)變化。必須為每個狀態(tài)設置不同的樣式。用于確定不同狀態(tài)的最簡單方法是使用:hover，:focus，:active和:target偽類。過渡相關的屬性總共有四個，包括transition-property，transition-duration，transition-timing-function和transition-delay。前兩個屬性transition-property和transition-duration是必需的。第15章

變換、過渡與動畫過渡transtion屬性說明transition屬性說明transition簡寫屬性，用于在一個屬性中設置以下四個過渡屬性。transition-property規(guī)定應用過渡的CSS屬性的名稱。transition-duration定義過渡效果花費的時間。默認是0。transition-timing-function定義過渡效果的時間曲線。默認是"ease"。transition-delay定義開始過渡的延遲時間。默認是0。第15章

變換、過渡與動畫過渡第15章

變換、過渡與動畫過渡transition屬性說明transition簡寫屬性，用于在一個屬性中設置以下四個過渡屬性。transition-property規(guī)定應用過渡的CSS屬性的名稱。transition-duration定義過渡效果花費的時間。默認是0。transition-timing-function定義過渡效果的時間曲線。默認是"ease"。transition-delay定義開始過渡的延遲時間。默認是0。transition-timing-function屬性說明linear表示在過渡過程中勻速變化。ease默認值，初始速度和勻速一致，然后先加速后減速。ease-in表示過渡開始緩慢，且在整個過渡過程中加速地過渡。ease-out表示過渡開始快速，且在整個過渡過程中減速地過渡。ease-in-out表示過渡開始緩慢，在中間加速，然后在結束前再次減速。第15章

變換、過渡與動畫DEMO第15章

變換、過渡與動畫關鍵幀動畫過渡在處理從一種狀態(tài)到另一種狀態(tài)的視覺交互時做得很出色，并且非常適合此類單狀態(tài)的更改。但是當需要更多控制時，比如轉換需要具有多個狀態(tài)時，則需要使用動畫功能。動畫可以定義任意多個過度點，通過CSS3的關鍵幀(@key-frames)規(guī)則來定義。@keyframes規(guī)則包括動畫名稱，任何動畫斷點，以及對應的動畫屬性。第15章

變換、過渡與動畫animation相關屬性說明animation屬性說明@keyframes定義動畫。animation所有動畫屬性的簡寫屬性。animation-name使用@keyframes動畫的名稱。animation-duration定義動畫完成一個周期所花費的秒或毫秒。默認是0。animation-timing-function定義動畫的速度曲線。默認是"ease"。animation-delay定義動畫何時開始。默認是0。animation-fill-mode定義當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。animation-iteration-count定義動畫被播放的次數(shù)。默認是1。animation-direction定義動畫是否在下一周期逆向地播放。默認是"normal"，除此之外，還有reverse、alternate

和

alternate-rev