CSS3的動畫屬性

transition、animation和transform是CSS3中三個製作動畫的重要屬性，本篇文章主要對其進行學習瞭解。

一、transition

transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。

transition ：transition-property || transition-duration || transition-timing-function || transition-delay;
複製程式碼

transition主要包含四個屬性值：執行變換的屬性：transition-property，變換延續的時間：transition-duration，在延續時間段，變換的速率變化：transition-timing-function，變換延遲時間：transition-delay。

1. transition-property

transition-property: none || all || property;
複製程式碼

transition-property是用來指定當元素其中一個屬性改變時執行transition效果。

none: 沒有屬性會獲得過渡效果；

all: 所有屬性都將獲得過渡效果,也是其預設值；

property: 定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

2. transition-duration

transition-duration: time;
複製程式碼

transition-duration是用來指定元素 轉換過程的持續時間，取值time為數值，單位為s（秒）或者ms(毫秒)，其預設值是0，也就是變換時是即時的。

3. transition-timing-function

transition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-
bezier(n,n,n,n);
複製程式碼

以上具體取值含義如下：

值	描述
linear	規定以相同速度開始至結束的過渡效果。
ease	規定慢速開始，然後變快，然後慢速結束的過渡效果。
ease-in	規定以慢速開始的過渡效果。
ease-out	規定以慢速結束的過渡效果。
ease-in-out	規定以慢速開始和結束的過渡效果。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。

4. transition-delay

transition-delay: time;
複製程式碼

transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果，其取值time為數值，單位為s（秒）或者ms(毫秒)， 預設大小是"0"，也就是變換立即執行，沒有延遲。

5. 示例

html程式碼

<div class="one"></div>
複製程式碼

css程式碼

.one {
        width: 100px;
        height: 100px;
        margin: 200px auto;
        background-color: #cd4a48;
        -webkit-transition: width, height 2s ease;
        -moz-transition: width, height 2s ease;
        -ms-transition: width, height 2s ease;
        -o-transition: width, height 2s ease;
        transition: width, height 2s ease;
    }

    .one:hover {
        width: 300px;
        height: 300px;
    }
複製程式碼

效果：

6. 注意事項

• 不是所有的CSS屬性都支援transition，完整的列表檢視這裡，以及具體的效果。
• transition需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。比如，height從0px變化到100px，transition可以算出中間狀態。但是，transition沒法算出0px到auto的中間狀態，也就是說，如果開始或結束的設定是height: auto，那麼就不會產生動畫效果。
• transition需要事件觸發，所以沒法在網頁載入時自動發生。
• transition是一次性的，不能重複發生，除非一再觸發。

二、animation

不同於transition只能定義首尾兩個狀態，animation可以定義任意多的關鍵幀，因而能實現更復雜的動畫效果。

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction
複製程式碼

animation主要包含六個屬性，具體含義如下：

值	描述
animation-name	規定需要繫結到選擇器的 keyframe 名稱。。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始之前的延遲，預設值為0。
animation-iteration-count	規定動畫應該播放的次數，預設值為1。
animation-direction	規定是否應該輪流反向播放動畫，預設值是正向。

1. keyframe

在介紹animation具體使用之前，要先介紹keyframe。

@keyframes 讓開發者通過指定動畫中特定時間點必須展現的關鍵幀樣式（或者說停留點）來控制CSS動畫的中間環節。這讓開發者能夠控制動畫中的更多細節而不是全部讓瀏覽器自動處理。

要使用關鍵幀, 先建立一個帶名稱的@keyframes規則，以便後續使用 animation-name這個屬性來呼叫指定的@keyframes. 每個@keyframes 規則包含多個關鍵幀，也就是一段樣式塊語句，每個關鍵幀有一個百分比值作為名稱，代表在動畫進行中，在哪個階段觸發這個幀所包含的樣式。

關鍵幀的編寫順序沒有要求，最後只會根據百分比按由小到大的順序觸發。

@keyframes animationname {keyframes-selector {css-styles;}}
複製程式碼

具體含義如下：

值	描述
animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時長的百分比。合法的值：0-100%from（與 0% 相同）to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

示例：

@keyframes identifier {
  0% { top: 0; left: 0px}
  50% { top: 30px; left: 20px; }
  100% { top: 0; left: 30px;}
}
複製程式碼

2. 示例

html程式碼

<div class="one"></div>
複製程式碼

css程式碼

.one {
        width: 100px;
        height: 100px;
        margin: 200px auto;
        background-color: #cd4a48;
        position: relative;
        animation: moveHover 5s ease-in-out 0.2s;

    }


    @keyframes moveHover {
        0% {
            top: 0px;
            left: 0px;
            background: #cd4a48;
        }
        50% {
            top: 200px;
            left: 200px;
            background:#A48992;
        }
        100% {
            top: 350px;
            left:350px;
            background: #FFB89A;
        }
    }
複製程式碼

效果：

3. 其他屬性

除了上述主要用到的六個屬性外，還要額外介紹兩個屬性。

animation-fill-mode

動畫結束以後，會立即從結束狀態跳回到起始狀態。如果想讓動畫保持在結束狀態，需要使用animation-fill-mode屬性。

animation-fill-mode: none || backwards || both
複製程式碼

• none：預設值，回到動畫沒開始時的狀態。
• forwards：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
• backwards：在 animation-delay所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
• both: 根據animation-direction輪流應用forwards和backwards規則。

animation-play-state

有時，動畫播放過程中，會突然停止。這時，預設行為是跳回到動畫的開始狀態。

如果想讓動畫保持突然終止時的狀態，就要使用animation-play-state屬性。

animation-play-state:running || paused
複製程式碼

animation-play-state主要是用來控制元素動畫的播放狀態。其主要有兩個值，running和paused其中running為預設值。通過paused將正在播放的動畫停下了，通過running將暫停的動畫重新播放，這個屬性目前很少核心支援。

三、transform

transform就是變形，主要包括旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

transform: none || transform-functions
複製程式碼

none:表示不進麼變換；transform-function表示一個或多個變換函式，以空格分開；換句話說就是我們同時對一個元素進行transform的多種屬性操作，例如rotate、scale、translate三種。

主要的transform-function變換函式如下：

1. translate

值	描述
translate(x,y)	定義 2D 轉換。
translate3d(x,y,z)	定義 3D 轉換。
translateX(x)	定義轉換，只是用 X 軸的值。
translateY(y)	定義轉換，只是用 Y 軸的值。
translateZ(z)	定義 3D 轉換，只是用 Z 軸的值。

2. scale

值	描述
scale(x,y)	定義 2D 縮放轉換。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	通過設定 X 軸的值來定義縮放轉換。
scaleY(y)	通過設定 Y 軸的值來定義縮放轉換。
scaleZ(z)	通過設定 Z 軸的值來定義 3D 縮放轉換。

3. rotate

值	描述
rotate(angle)	定義 2D 旋轉，在引數中規定角度。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿著 X 軸的 3D 旋轉。
rotateY(angle)	定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿著 Z 軸的 3D 旋轉。

4. skew

值	描述
skew(x-angle,y-angle)	定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle)	定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle)	定義沿著 Y 軸的 2D 傾斜轉換。

5. transform-origin

以上變化的預設參照點是元素的中心點，不過可以通過transform-origin設定元素的參照點。

transform-origin: X || Y || Z
複製程式碼

其中X，Y，Z對應三維座標，X，Y，Z的值可以是em，px。此外，X，Y可以是百分值，其中X也可以是字元引數值left，center，right。Y和X一樣除了百分值外還可以設定字元值top，center，bottom。

具體示例就不再寫了，情況比較多，實現起來也比較簡單。

四、總結

以上是關於CSS3中製作動畫的三個屬性，內容比較基礎，不過卻很實用。僅僅只需要CSS，即可實現一些較為簡單的動畫效果，省去了複雜的js程式碼。