transition、animation和transform是CSS3中三個(gè)制作動(dòng)畫的重要屬性，本篇文章主要對其進(jìn)行學(xué)習(xí)了解。

一、transition

transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變CSS的屬性值。

transition ：transition-property || transition-duration || transition-timing-function || transition-delay;

transition主要包含四個(gè)屬性值：執(zhí)行變換的屬性：transition-property，變換延續(xù)的時(shí)間：transition-duration，在延續(xù)時(shí)間段，變換的速率變化：transition-timing-function，變換延遲時(shí)間：transition-delay。

1. transition-property

transition-property: none || all || property;

transition-property是用來指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行transition效果。

none: 沒有屬性會(huì)獲得過渡效果；

all: 所有屬性都將獲得過渡效果,也是其默認(rèn)值；

property: 定義應(yīng)用過渡效果的 CSS 屬性名稱列表，列表以逗號(hào)分隔。

2. transition-duration

transition-duration: time;

transition-duration是用來指定元素 轉(zhuǎn)換過程的持續(xù)時(shí)間，取值time為數(shù)值，單位為s（秒）或者ms(毫秒)，其默認(rèn)值是0，也就是變換時(shí)是即時(shí)的。

3. transition-timing-function

transition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-
bezier(n,n,n,n);

以上具體取值含義如下：

4. transition-delay

transition-delay: time;

transition-delay是用來指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間，也就是說當(dāng)改變元素屬性值后多長時(shí)間開始執(zhí)行transition效果，其取值time為數(shù)值，單位為s（秒）或者ms(毫秒)， 默認(rèn)大小是"0"，也就是變換立即執(zhí)行，沒有延遲。

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. 注意事項(xiàng)

• 不是所有的CSS屬性都支持transition，完整的列表查看這里，以及具體的效果。
• transition需要明確知道，開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計(jì)算出中間狀態(tài)。比如，height從0px變化到100px，transition可以算出中間狀態(tài)。但是，transition沒法算出0px到auto的中間狀態(tài)，也就是說，如果開始或結(jié)束的設(shè)置是height: auto，那么就不會(huì)產(chǎn)生動(dòng)畫效果。
• transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時(shí)自動(dòng)發(fā)生。
• transition是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。

二、animation

不同于transition只能定義首尾兩個(gè)狀態(tài)，animation可以定義任意多的關(guān)鍵幀，因而能實(shí)現(xiàn)更復(fù)雜的動(dòng)畫效果。

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction

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

1. keyframe

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

@keyframes 讓開發(fā)者通過指定動(dòng)畫中特定時(shí)間點(diǎn)必須展現(xiàn)的關(guān)鍵幀樣式（或者說停留點(diǎn)）來控制CSS動(dòng)畫的中間環(huán)節(jié)。這讓開發(fā)者能夠控制動(dòng)畫中的更多細(xì)節(jié)而不是全部讓瀏覽器自動(dòng)處理。

要使用關(guān)鍵幀, 先創(chuàng)建一個(gè)帶名稱的@keyframes規(guī)則，以便后續(xù)使用 animation-name這個(gè)屬性來調(diào)用指定的@keyframes. 每個(gè)@keyframes 規(guī)則包含多個(gè)關(guān)鍵幀，也就是一段樣式塊語句，每個(gè)關(guān)鍵幀有一個(gè)百分比值作為名稱，代表在動(dòng)畫進(jìn)行中，在哪個(gè)階段觸發(fā)這個(gè)幀所包含的樣式。

關(guān)鍵幀的編寫順序沒有要求，最后只會(huì)根據(jù)百分比按由小到大的順序觸發(fā)。

@keyframes animationname {keyframes-selector {css-styles;}}

具體含義如下：

示例：

@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. 其他屬性

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

animation-fill-mode

動(dòng)畫結(jié)束以后，會(huì)立即從結(jié)束狀態(tài)跳回到起始狀態(tài)。如果想讓動(dòng)畫保持在結(jié)束狀態(tài)，需要使用animation-fill-mode屬性。

animation-fill-mode: none || backwards || both

• none：默認(rèn)值，回到動(dòng)畫沒開始時(shí)的狀態(tài)。
• forwards：當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。
• backwards：在 animation-delay所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）。
• both: 根據(jù)animation-direction輪流應(yīng)用forwards和backwards規(guī)則。

animation-play-state

有時(shí)，動(dòng)畫播放過程中，會(huì)突然停止。這時(shí)，默認(rèn)行為是跳回到動(dòng)畫的開始狀態(tài)。

如果想讓動(dòng)畫保持突然終止時(shí)的狀態(tài)，就要使用animation-play-state屬性。

animation-play-state:running || paused

animation-play-state主要是用來控制元素動(dòng)畫的播放狀態(tài)。其主要有兩個(gè)值，running和paused其中running為默認(rèn)值。通過paused將正在播放的動(dòng)畫停下了，通過running將暫停的動(dòng)畫重新播放，這個(gè)屬性目前很少內(nèi)核支持。

三、transform

transform就是變形，主要包括旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動(dòng)translate以及矩陣變形matrix。

transform: none || transform-functions

none:表示不進(jìn)么變換；transform-function表示一個(gè)或多個(gè)變換函數(shù)，以空格分開；換句話說就是我們同時(shí)對一個(gè)元素進(jìn)行transform的多種屬性操作，例如rotate、scale、translate三種。

主要的transform-function變換函數(shù)如下：

1. translate

2. scale

3. rotate

4. skew

5. transform-origin

以上變化的默認(rèn)參照點(diǎn)是元素的中心點(diǎn)，不過可以通過transform-origin設(shè)置元素的參照點(diǎn)。

transform-origin: X || Y || Z

其中X，Y，Z對應(yīng)三維坐標(biāo)，X，Y，Z的值可以是em，px。此外，X，Y可以是百分值，其中X也可以是字符參數(shù)值left，center，right。Y和X一樣除了百分值外還可以設(shè)置字符值top，center，bottom。

具體示例就不再寫了，情況比較多，實(shí)現(xiàn)起來也比較簡單。

四、總結(jié)

以上是關(guān)于CSS3中制作動(dòng)畫的三個(gè)屬性，內(nèi)容比較基礎(chǔ)，不過卻很實(shí)用。僅僅只需要CSS，即可實(shí)現(xiàn)一些較為簡單的動(dòng)畫效果，省去了復(fù)雜的js代碼。