CSS3動畫之一：Transitions功能

woff · 發表於 2013-3-2 20:16:13

　　在頁面裡加入些動畫，可以是頁面更加生動活潑，使用CSS3的動畫功能，可以使頁面上的文字或圖像具有動畫功能。比如說背景色從一種顏色，平滑的過度到另一種顏色。CSS3中的動畫功能有兩種，Transitions和Animations。這兩種功能都可以通過改變CSS中的屬性值來產生動畫效果。本文簡單介紹一下Transitions功能的使用方法。
　　到目前為止，支持CSS3中的Transitions功能的瀏覽器有：Firefox 4+ 、Opera 10+、Safari 3.1+、Chrome 8+等，transitions屬性的使用方法如下：
　　transition: property duration timing-function
　　但是，在書寫CSS代碼的時候，如果是Firefox瀏覽器，需要書寫成「-moz-transition」的形式；如果是Opera瀏覽器，需要書寫成「-o-transition」的形式；如果是Safari或者Chrome瀏覽器，則寫成「-webkit-transition」的形式。
　　前面說了，Transitions和Animations都是通過改變CSS中屬性的值來產生動畫效果的，所以，property表示需要改變的屬性， duration表示在多長時間內完成動畫，也就是動畫執行的時間，timing-function表示通過神馬方法進行動畫。
　　下面看一個例子來演示一下Transitions功能的動畫效果，頁面中一個div元素，背景色為黃色，用過hover屬性指定當鼠標指針停留在div元素上時背景色變為淺藍色，通過transition屬性指定：當鼠標指針移動到div元素上時，在1s鍾內div元素的背景色從黃色平滑過渡到淺藍色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transitions功能用法</title>
<style>
div {
background-color: #ff0;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
}
div:hover {
background-color: #0ff;
}
</style>
</head>
<body>
<div>鼠標放上來，看我的背景色</div>
</body>
</html>

複製代碼

　　可以看到，當鼠標移到div元素上時，背景色從黃色變綠色然後邊淺藍色，這樣的平滑過渡效果，在CSS2中一般可以用jQuery去實現。如今採用CSS3的Transitions功能就方便多了。
　　還有一種用法，就是把transition的三個屬性分開寫，寫成: transition-proterty屬性, transition-duration屬性, transition-timing-function屬性。這三個屬性的指定方法與含義與transition屬性中的三個參數的含義及指定方法完全相同，是一樣的。代碼

transition-property: background-color;
transition-duration: 1s;
transition-timing-function: linear;

複製代碼

　　當然，針對不同的瀏覽器，前面要加上相應的前綴。在這兒就不一一寫出了。
剛才這個例子只是改變了一個屬性值，那麼Transitions功能可不可以同時改變多個屬性值呢？當然可以，why not？下面把剛才的例子稍微修改一下：一個div元素，背景色為黃色，字體顏色為黑色，寬度為400px，通過hover屬性指定當鼠標指針停留在div元素上時背景色變為淺藍色，字體為白色，寬度增加到500px。通過transition屬性指定當鼠標指針移到到div元素上時在1s鐘的時間內完成這幾個屬性值的變化即平滑過渡。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transitions功能用法</title>
<style>
div {
background-color: #ff0;
color: #000;
width: 400px;
-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
-o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div:hover {
background-color: #0ff;
color: #fff;
width: 500px;
}
</style>
</head>
<body>
<div>鼠標放上來，看我的背景色,文字顏色和寬度</div>
</body>
</html>

複製代碼

　　和預計的一樣，背景色平滑過渡的時候，文字顏色也在平滑過渡，而寬度也漸漸的從400px變為500px。比起以前直接hover是不是炫多了？
使用Transitions功能實現動畫的缺點是只能指定屬性的開始值與終點值，然後再這兩個屬性值之間實現平滑過渡，不能實現更為複雜的動畫效果，在CSS3中，除了Transitions功能外，還可以使用Animations功能實現動畫效果，它允許通過關鍵幀的指定在頁面上實現更為複雜的動畫效果。

帳號		自動登錄		找回密碼
密碼				註冊

[教學] CSS3動畫之一：Transitions功能

相關帖子