CSS3的動畫屬性

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

1、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是一次性的，不能重複發生，除非一再觸發。

2、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將暫停的動畫從新播放，這個屬性目前不多內核支持。

3、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。

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

4、總結

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