【CSS】過渡、動畫和變換

【CSS】過渡、動畫和變換

1. 使用過渡

過渡效果一般是由瀏覽器直接改變元素的CSS屬性實現的。例如，如果使用:hover選取器，一旦使用者將滑鼠移至上方在元素之上，瀏覽器就會應用跟選取器關聯的屬性。

        Example            
            There are lots of different kinds of fruit - there are over 500 varieties of banana alone.            By the time we add the countless types of apples, oranges, and other well-know fruit, we are faced with thousands of choices.        

當使用者將滑鼠移至上方在span元素上的時候，瀏覽器就會響應，直接應用新的屬性。變化如所示：

CCS過渡屬性允許控制應用新屬性值的速度。比如可以選擇逐漸改變樣本中span元素的外觀，讓滑鼠移到單詞banana上的效果更和諧。

transition-delay 和 transition-duration 屬性指定為CSS時間，是一個數字，單位為ms（毫秒）或者s（秒）。

transition簡寫屬性的格式如下：

transition:    

修改前面樣本的CSS代碼如下：

p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}#banana { font-size: large; border: medium solid green;}#banana:hover {    font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;    transition-delay: 100ms;    transition-property: background-color,color,padding,font-size,border;    transition-duration: 500ms;}

在這個例子中，為樣式添加了過渡，是通過#banana:hover 選取器應用的。過渡會在使用者將滑鼠移至上方在span元素上100ms之後開始，期間為500ms，過渡應用到 background-color、color、padding、font-size和border屬性。下面的展示了這個過渡的漸進過程：

注意這個樣本中指定多個屬性的方式。過渡屬性的值用逗號隔開，這樣過渡效果才會同時出現。可以為延遲時間和期間指定多個值，它代表的意思是不同的屬性在不同的時間點開始過渡，且期間也不同。

1.1 建立反向過渡

過渡只有在應用與其關聯的樣式時才會生效。樣本樣式中使用了:hover 選取器，這意味著只有使用者將滑鼠移至上方在span元素上才會應用樣式。使用者一旦將滑鼠從span元素上已開，只剩下#banana樣式，預設情況下，元素的外觀會立刻回到初始狀態。

因為這個原因，大多數過渡成對出現：暫時狀態的過渡和方向相反的反向過渡。修改前面樣本的CCS代碼，從而展示如何通過應用另一種過渡樣式平滑地返回初始樣式。

p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}#banana {    font-size: large; border: medium solid green;    transition-delay: 100ms;    transition-duration: 500ms;}#banana:hover {    font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;    transition-delay: 100ms;    transition-property: background-color,color,padding,font-size,border;    transition-duration: 500ms;}

1.2 選擇中間值的計算方式

使用過渡時，瀏覽器需要為每個屬性計算初始值和最終值之間的中間值。使用transition-timing-function 屬性指定計算中間值的方式，表示為四個點控制的三次貝茲路徑。有五種預設曲線可以選擇，由下面的值表示：

* ease（預設值）

* linear

* ease-in

* ease-out

* ease-in-out

從可以看到這五種曲線，它們展示了中間值隨著時間的推移變為最終值的速率。

搞清楚這些值最簡單的辦法就是在自己的HTML文檔中實驗。還有另外一個值 cubic-bezier，可用來指定自訂曲線。

修改前面樣本的CSS樣式如下，展示 transition-timing-function 屬性的應用：

p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}#banana {    font-size: large; border: medium solid green;    transition-delay: 10ms;    transition-duration: 250ms;;}#banana:hover {    font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;    transition-delay: 100ms;    transition-property: background-color,color,padding,font-size,border;    transition-duration: 500ms;    transition-timing-function: linear;}

2. 使用動畫

CSS動畫本質上是增強過渡。在如何從一種樣式過渡到另一種樣式的過程中，具有了更多選擇、更多控制，以及更多靈活性。

animation 簡寫屬性的格式如下：

animation:     

注意，這些屬性都不是用來指定要作為動畫的CSS屬性的。這是因為動畫是在兩部分定義的。第一部分包含在樣式聲明中，使用了上面表中列出的屬性。它們定義了動畫的樣式，但並沒有定義哪些屬性是動畫。第二部分使用@key-frames規則視窗，用來定義定義動畫的屬性。從下面代碼中可以看到定義動畫的這兩部分。

        Example    

要明白在這個樣本中做了什麼，應該仔細研究一下動畫的兩部分。第一部分是在樣式中定義動畫屬性，是跟#ball選取器一起的。先看看基本屬性：選取器樣式應用100ms後開始播放動畫屬性，期間2000ms，無限重複播放，中間值使用linearFunction Compute。除了重複播放動畫，這些屬性在過渡中都有對應屬性。

這些基本的屬性並沒有指出為哪些CSS屬性應用動畫。為此，要使用 animation-name 屬性給動畫屬性起個名字，這裡叫 GrowsQuare 。這樣，就相當於告訴瀏覽器找一組名為 GrowQuare 的主要畫面格，然後將這些基本屬性的值應用到 @keyframes指定的動畫屬性上。下面是此例代碼中主要畫面格的聲明（這裡省略了-webkit首碼）：

@-webkit-keyframes GrowQuare {     to {         background-color: yellow;         border-radius: 0;     } }

聲明的開始是@keyframes，接著指定了這組主要畫面格的名字 GrowQuare。聲明內部指定了一組要應用的動畫效果。to 聲明定義了一組設定動畫樣式的屬性，同時也定義了動畫結束時這些屬性的最終值。動畫的初始值來自進行動畫處理的元素在應用樣式之前的屬性值。

此例的效果是一個大小為180像素的圓形，漸層成正方形。其顯示效果如所示：

2.1 使用主要畫面格

CSS動畫的主要畫面格機器靈活，非常值得研究。

(1) 設定初始狀態

在前面的樣本中，要處理為動畫的屬性的初始值來自元素自身。可以使用from子句指定另一組值。修改前面樣本的CSS檔案如下：

#ball{    width: 180px; height: 180px; background-color:green; margin:20px auto;border-radius: 90px;    -webkit-animation-delay: 1000ms;    -webkit-animation-duration: 2000ms;    -webkit-animation-iteration-count: infinite;    -webkit-animation-timing-function: linear;    -webkit-animation-name:'GrowQuare';}@-webkit-keyframes GrowQuare {    from {        background-color: black;        width: 90px;        height: 180px;        border-radius: 45px/90px;    }    to {        background-color: yellow;        border-radius: 0;    }}

在這個例子中修改了動畫延遲為1000ms，並為背景色、寬度、高度、圓角邊框屬性提供了初始值，在to句子中指定的其他屬性在動畫開始時的初始值來自元素自身。從下面的顯示效果可以看出來。最開始是一個綠色的圓形，然後一秒後直接變成一個豎立的黑色橢圓，再經過兩秒逐漸改變成黃色的正方形。

(2) 指定中間主要畫面格

也可以添加其他主要畫面格定義動畫的中間階段。這是通過添加百分數子句實現的，修改前面樣本CSS代碼如下：

#ball{    width: 200px; height: 200px; background-color:green; margin:20px auto;border-radius: 100px;    -webkit-animation-delay: 1000ms;    -webkit-animation-duration: 2000ms;    -webkit-animation-iteration-count: infinite;    -webkit-animation-timing-function: linear;    -webkit-animation-name:'GrowQuare';}@-webkit-keyframes GrowQuare {    from {        background-color: black;        width: 100px;        height: 200px;        border-radius: 50px/100px;    }    50% {        background-color: red;        width: 50px;height: 100px; border-radius: 25px/50px;margin:70px auto;    }    75%{        background: blue;        width: 25px;height: 50px; border-radius: 12.5px/25px;margin:95px auto;    }    to {        background-color: yellow;        border-radius: 0;    }}

對於每一個百分數子句，在動畫中定義了一個點，這時子句中指定的屬性和值會完全應用到樣式上。此例中，定義了50%和75子句。

中主要畫面格有兩個用途。一是為屬性定義新的變化速率。瀏覽器會使用animation-timing-function 屬性指定的調速Function Compute由一個主要畫面格移動到下一個主要畫面格需要的中間值，以確保主要畫面格與主要畫面格之間流暢地播放。二則是定義屬性值，以便建立更為複雜的動畫。可以看到此例顯示效果如下：

2.2 設定重複方向

動畫結束後瀏覽器可以選擇接下來動畫以何種方式重複。使用 animation-direction屬性指定首先方式。

修改前面樣本CSS代碼如下：

#ball{    width: 50px; height: 50px; background-color:green;border-radius: 25px;    -webkit-animation-delay: 100ms;    -webkit-animation-duration: 2s;    -webkit-animation-iteration-count: 2;    -webkit-animation-timing-function: linear;    -webkit-animation-name:'GrowQuare';    -webkit-animation-direction: alternate;}@-webkit-keyframes GrowQuare {    50%{        margin-top: 200px;    }    to {        margin-left:200px;    }}

2.3 理解結束狀態

CSS動畫的一個局限是主要畫面格為屬性定義的值只能在動畫中應用。動畫結束後，動畫元素的外觀回到初始狀態。

2.4 初始布局時應用動畫

跟過渡相比，動畫的一個優勢是可以將其應用到頁面的初始布局。當把 animation-delay 屬性的值設為0 （預設值），當頁面一旦載入就會自動應用樣式，這就意味著瀏覽器一旦顯示HTML就有了動畫效果。

PS:使用上訴方法要謹慎。如果要在頁面中使用動畫，而動畫效果不是邀請使用者只需某一動作，這種情況更應該慎之又慎。如果確實要使用動畫，要保證動畫效果緩和一些，不要妨礙使用者閱讀或者與頁面其他部分互動。

2.5 重用主要畫面格

我們可以對同一組主要畫面格應用多個動畫，從而動畫屬性配置不同的值。

        Example    

代碼中展示了兩個樣式，它們都使用了GrowQuare 主要畫面格。如下：

2.6 為多個元素應用多個動畫

前面例子的一個變體是為多個元素應用同一個動畫。在包含動畫細節的樣式中，延伸選取器的範圍即可實現這一點。

(1)為多個元素應用一個動畫

        Example    

（2）為一個元素應用多個主要畫面格

        Example    

2.7 停止和啟動動畫

aniamation-play-state 屬性可以用來停止和啟動動畫。如果這個屬性的值為paused，動畫就會停止。如果換成 playing。動畫就會開始播放。

        Example    
    Running    Paused

3. 使用變換

我們可以使用CSS變換為元素應用線性變換，也就是說可以旋轉、縮放、傾斜和平移某個元素。

3.1 應用變換

下面代碼是一個變換的例子。

        Example    

此例中，為#banana2 選取器添加了一個transform 屬性聲明，指定了兩個變換。第一個是旋轉-45°（即逆時針旋轉45°）；第二個是沿x軸進行因子為1.2的縮放。這些變換的效果如所示：

3.2 指定元素變換的起點

transform-origin屬性允許我們指定應用變換的起點。預設情況下，使用元素的中心作為起點，不過，可以使用下表中的值選擇其他起點。

要定義起點，需要為x軸和y軸各定義一個值。如果只提供一個值，另一個值會被認為是中心位置。下面代碼展示了 transform-origin屬性的用法。

        Example    

此例中，將變換的起點已到了元素的右上方，從下面的顯示可以看到：

3.3 將變換作為動畫和過渡處理

我們可以為變換應用動畫和過渡，就和其他CSS屬性一樣。

        Example    

此例中，定義了一個過渡，它會經過5秒完成一次360°旋轉變換。當使用者將滑鼠移至上方在 #banana2 元素上，就會應用過渡，效果如所示：

