CSS3 Transitions, Transforms和Animation的使用

一、前言

　　CSS3動畫相關的幾個屬性是：transition, transform, animation；分別理解為過渡，變換，動畫。雖意義相近，但具體的功能和在CSS3中承擔的工作有一定的差異。

　　transition指過渡，就是從a點都b點，是有時間的，是連續的，一般針對常規CSS屬性；transform指變換，包含幾個固定的屬性：旋轉、縮放、偏移等等，但是，效果就是很干澀機械的旋轉移動，如果配合transition屬性，變換就會很平滑。animation最先使用於Safari瀏覽器，在官方的Introduction上介紹這個屬性是transition屬性的擴展。但是這個簡單的介紹里面包含了不簡單的東西：keyframes。

 

二、Transition

　　CSS3 transition屬性是一個簡單的動畫屬性，可以說它是animation的簡化版本，是給普通做簡單網頁特效用的，其作用是：平滑地改變CSS的值。無論是點擊事件，焦點事件，還是鼠標hover，只要值改變了，就是平滑的，就是動畫。所以對於一個整站通用的class，可以很輕松的漸進增強地實現動畫效果，很有實用價值。

比如你有以下兩個樣式：

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

 

其中animate的transition的屬性的意思說：當你的left屬性發生變化的時候，執行動畫效果（僅僅基於left的屬性變化，其他的屬性不會加入到動畫變化里面去）。

　　首先你的元素的css為position。當你將其cssList 增加 animate 或者替換position 為animate的時候，元素的屬性變化，觸發webkit-transition，以指定屬性變化前的值為起始值，變化后的屬性為結束值，執行動畫效果。這是一個簡單的兩點變化過程，大大簡化了animation屬性的復雜程度。

　　同時，如果在transition的動畫當中，屬性值有了新的變化，則會中斷當前的動畫執行，並將中斷時的屬性值提供給新的動畫作為起始值來計算新的動畫效果。

 

而transition有下面些具體屬性：

transition-property :    * //指定過渡的性質，比如transition-property:backgrond 就是指backgound參與這個過渡
transition-duration:    *//指定這個過渡的持續時間
transition-delay:    * //延遲過渡時間
transition-timing-function:    *//指定過渡類型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

例如下面這個很簡單的例子：

.trans {
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

就跟CSS2的background屬性一樣，平時我們都不會像上面一樣，把transition的屬性一個一個攤開寫，而是合並。

還是上面的例子，我們將transition屬性合並，並擴展幾個瀏覽器，如下CSS代碼：

.trans {
    ...
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

　　transition中的transition-timing-function屬性是十分重要的，其一堆ease相關的值（linear | ease-in | ease-out | ease-in-out | cubic-bezier），不太容易讓人理解。

　　首先cubic-bezier這個基本上就不用管了，大部分情況都用不到這個東西（有想深入研究的同學自行研究，我絕對不會告訴你這是指貝塞爾曲線，與復雜的數學扯上了關系……）。Linear即線性。至於剩下三個，就是指緩動效果，說白了就是指開始時候慢慢動呢還是結束的時候慢慢動ease-in表示先慢后快；ease-out表示先快后慢；ease-in-out表示先慢后快再慢。

　　（注意：不管什么時候快什么時候慢最后都是同時到達，完成時間只與transition-delay屬性有關）。

 

三、Transform

　　transform指變換，使用過PS的人應該知道里面的Ctrl+T自由變換。transform就是指的這個東西，即拉伸、壓縮、旋轉、偏移等等。

　　見下面示例代碼：

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

　　transform屬性要是加上transition的過渡特性，就是如虎添翼。例如下面這個例子，關鍵代碼如下：

.trans_effect {
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;    
    transition:all 2s ease-in-out;
}
.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);        
}

　　結果在Chrome和 Safari瀏覽器下就有了祖瑪里面青蛙掛掉時的縮放旋轉效果了。

　   在部分的test case當中，每每演示transform屬性的，看起來好像都是帶動畫。這使得小部分直覺化思維的人（包括我）認為transform屬性是動畫屬性。而恰恰相反，transform屬性是靜態屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程。transform的主要用途是用來做元素的特殊變形，對於做設計的人來說並不是很陌生，簡單的來說就是css 的圖形變形工具。

　　關於圖形變形的基礎條件當中的原點設定，在css里面使用的是transform-origin來定義的。這個定義的原點應該是該css作用的元素的左上角為0,0來計算的（有待研究）。其他的屬性則根據這個屬性來計算進行計算。

　　關於圖形變化的模式，css3標准當中transform-style來定義。默認是flat，展現出來的是簡單的效果。而preserve-3d則將空間呈現為3d模式。從正常的思維來說，應該只需要preserve-3d就好了，但是從謠傳“開啟了perserve-3d就使用了GPU加速”來說，這個屬性可能是為了降低系統消耗用的，畢竟3d比2d要多一個維度的計算。

　　如果需要使用3d模式，必須先指定style為3d，並在任意父元素上增加 perspective 及perspective-origin 來指定透視點。

具體的給設計師改變元素樣式用的屬性則有以下五個：

　　translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的；

　　rotate(deg)是用來控制元素旋轉角度的；

　　skew[x,y](deg) 這個屬性是用來制作傾斜度的，做過設計的人可能會知道，這個是用來在2d里面創建3d透視圖的時候必須的屬性；

　　scale3d(x,y,z) 用來放大縮小效果，屬性是比值；

　　matrix3d，css矩陣。通過這個矩陣屬性，涵蓋了上面所有的屬性值，但是個人覺得可讀性極差（全都是數字和單位，背起來有點模糊），目前沒有理由推薦使用。

　　總體看來 css transform的屬性和原來使用的left ，right ，top， bottom 的屬性從動靜角度來說沒有任何區別，因此使用的時候應該將transform歸類到這類定位變形的靜態屬性里面。

 

四、Animations

　　做過Flash動畫的人都會知道，Flash里面有兩個基礎武器：時間軸和關鍵幀。而css keyframes的出現，則是提供了flash世界里面的這兩個屬性的合集。看一個簡單的 keyframes 的示例：

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
    left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

　　上面這個代碼展示了一個keyframes 'wobble'，其中 0％ 代表在變化中不同時間點的屬性值，你可以較精確的控制動畫變化中任何一個時間點的屬性效果。而animation則根據這個keyframes提供的屬性變化方式去計算元素動畫當中的屬性。與 transition 不同的是，keyframes提供更多的控制，尤其是時間軸的控制，這點讓css animation更加強大，使得flash的部分動畫效果可以由css直接控制完成，而這一切，僅僅只需要幾行代碼，也因此誕生了大量（比起flash來說算是大量了）基於css的animation tools，用來取代flash的動畫部分。

　　另外在animation屬性里面還有一個最重要的就是：animation-fill-mode，這個屬性標示是以(from/0%)指定的樣式 還是以(to/100%)指定的樣式為動畫完成之后的樣式。這個很方便我們控制動畫的結尾樣式，保證動畫的整體連貫。

 

　　看下面的代碼示例：

@-webkit-keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);        
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    }
}
.anim_box:hover {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

　　此例子中，鼠標懸停時動畫只執行4次。

　　效果大致如下，默認是個矩形框：

　　鼠標移上去后顯示慢慢的寬度增加，然后突然快速的寬度增加，同時背景色加深，下為動畫過程中的截圖：

 

 

　　animations不僅適用於CSS2中的屬性，CSS3也是支持的，例如box-shadow盒陰影效果，所以，我們可以實現外發光效果的。

 

 

　　發光效果如下：

CSS代碼如下：

@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5);         
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0); 
    }
}
.anim_image {
    padding:3px;
    border:1px solid #beceeb;
    background-color:white;
    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
}
.anim_image:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}

五、瀏覽器支持情況

CSS Transitions

首次引入

Safari 3.2: 13/11/2008

Firefox 4.0: Late 2010

Chrome 1.0: 02/09/2008

Opera 10.5: 02/03/2010

CSS 2D Transformations

首次引入

Safari 3.2: 13/11/2008

Firefox 3.5: 30/06/2009

Chrome 1.0: 02/09/2008

Opera 10.5: 02/03/2010

Internet Explore 9: 09/2010

CSS Animations

首次引入

Safari 4.0: 11/06/2008

Chrome 1.0: 02/09/2008

CSS 3D Transformations

首次引入

Safari 4.0: 11/06/2008

Chrome: 28/08/2010