在css3中，如果使用動畫功能，可以使頁面上的文字或畫像具有動畫效果，可以使背景色從一種顏色平滑過度到另一種顏色。
css3中的動畫功能分為Transition功能與Animations功能，這兩種功能都可以透過改變css中的屬性值來產生動畫效果。
目前為止，Transitions功能支援從一個屬性值平滑過度到另一個屬性值，Animations功能支援透過關鍵影格的指定來在頁面上產生更複雜的動畫效果。
| 瀏覽器 | #Firefox 4+ | Opera 10 | #Safari 3.1 + | Chrome 8+ |
|---|---|---|---|---|
| #各瀏覽器寫法 | -moz-transition | -o -transition | -webkit-transition | -webkit-transition |
transition:property duration timing-function;property表示对哪个属性进行平滑过渡； duration表示在多长时间内完成属性的平滑过渡； timing-function表示通过什么方法来进行平滑过渡；
html:
<p>示例文字</p>
線上示範（滑鼠經過，背景顏色改變）
<style>
p { background-color: pink; -webkit-transition: background-color 1s linear; -moz-transition: background-color 1s linear; -o-transition: background-color 1s linear; }
p:hover { background-color: blue; /*鼠标经过背景颜色改变*/
}</style>線上示範（滑鼠經過，背景顏色、字體顏色、寬度改變）
<style>
p { background-color: pink; -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; }
p:hover { background-color: blue; /*鼠标经过背景颜色改变*/
color: #fff; /*鼠标经过字体颜色改变*/
width: 400px; /*鼠标经过宽度改变*/
}</style>滑鼠經過圖片，先向右移動30px，然後旋轉180度；
html：
<p><img src="images/03.jpg" alt="*"></p>
css：
img {
position: absolute; top: 70px; left: 0; -webkit-transform: rotate(0deg); -webkit-transitions: left 1s linear, -webkit-transform 1s linear; -moz-transform: rotate(0deg); -moz-transitions: left 1s linear, -moz-transform 1s linear; -o-transform: rotate(0deg); -o-transitions: left 1s linear, -o-transform 1s linear; }
p:hover img{ position: absolute; left: 30px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); }解析：
使用Transitions功能實現動畫的缺點是只能指定屬性的開始值與終點值，然後在這兩個屬性之間實現平滑過渡，不能實現更為複雜的動畫效果；
但使用Animation功能實現動畫效果，它允許透過關鍵影格的指定來在頁面上產生複雜的動畫效果。
在css3中，如果使用動畫功能，可以使頁面上的文字或畫像具有動畫效果，可以使背景色從一種顏色平滑過度到另一種顏色。
css3中的動畫功能分為Transition功能與Animations功能，這兩種功能都可以透過改變css中的屬性值來產生動畫效果。
目前為止，Transitions功能支援從一個屬性值平滑過度到另一個屬性值，Animations功能支援透過關鍵影格的指定來在頁面上產生更複雜的動畫效果。
| 瀏覽器 | #Firefox 4+ | Opera 10 | #Safari 3.1 + | Chrome 8+ |
|---|---|---|---|---|
| #各瀏覽器寫法 | -moz-transition | -o -transition | -webkit-transition | -webkit-transition |
transition:property duration timing-function;property表示对哪个属性进行平滑过渡； duration表示在多长时间内完成属性的平滑过渡； timing-function表示通过什么方法来进行平滑过渡；
html:
<p>示例文字</p>
線上示範（滑鼠經過，背景顏色改變）
<style>
p { background-color: pink; -webkit-transition: background-color 1s linear; -moz-transition: background-color 1s linear; -o-transition: background-color 1s linear; }
p:hover { background-color: blue; /*鼠标经过背景颜色改变*/
}</style>線上示範（滑鼠經過，背景顏色、字體顏色、寬度改變）
<style>
p { background-color: pink; -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; }
p:hover { background-color: blue; /*鼠标经过背景颜色改变*/
color: #fff; /*鼠标经过字体颜色改变*/
width: 400px; /*鼠标经过宽度改变*/
}</style>滑鼠經過圖片，先向右移動30px，然後旋轉180度；
html：
<p><img src="images/03.jpg" alt="*"></p>
css：
img { position: absolute; top: 70px; left: 0; -webkit-transform: rotate(0deg); -webkit-transitions: left 1s linear, -webkit-transform 1s linear; -moz-transform: rotate(0deg); -moz-transitions: left 1s linear, -moz-transform 1s linear; -o-transform: rotate(0deg); -o-transitions: left 1s linear, -o-transform 1s linear; }
p:hover img{ position: absolute; left: 30px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); }解析：
使用Transitions功能實現動畫的缺點是只能指定屬性的開始值與終點值，然後在這兩個屬性之間實現平滑過渡，不能實現更為複雜的動畫效果；
但使用Animation功能實現動畫效果，它允許透過關鍵影格的指定來在頁面上產生複雜的動畫效果。
以上是css3動畫功能之Transitions功能的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
