是一(yī)個css3屬性，規定完成過度效果需要花費的(de)時間（一(yī)秒或毫秒計）。
語法：transition-duration: time;
time ： 規定完成過渡效果需要花費的(de)時間（以秒或毫秒計）。 默認值是 0，意味着不會有效果。
該屬性其實是transition屬性的(de)一(yī)個子(zǐ)屬性，下面總結一(yī)下css3中的(de)transition屬性：
【transition】
用于在一(yī)定的(de)時間內(nèi)平滑的(de)過度，這種效果可(kě)以在鼠标單擊，獲取焦點，被點擊或對元素任何改變中觸發，并圓滑的(de)以動畫效果改變CSS屬性的(de)屬性值。
從定義可(kě)以知道(dào)transition是一(yī)個用于動畫過度的(de)屬性，然而transiton屬性隻不過是一(yī)個簡寫屬性，用于設置四個過度屬性，這
四個過度屬性分别是:
transition-property (執行變換的(de)屬性 )
transition-duration (變換延續時間)
transition-timing-function (延續時間內(nèi)，變換速率的(de)變化)
transition-delay (變換延遲時間)
下面來分别介紹一(yī)下各個屬性
transition-property 即用來指定當元素其中一(yī)個屬性改變是執行transition效果
值:none(沒有屬性改變)，all(所有屬性都改變)或指定某一(yī)元素(比如(rú)color，background等屬性)。
transition-duration 是動畫執行的(de)時間，單位(s)比如(rú)"0.1s"也可(kě)以寫成".1s"，它可(kě)以作用于任何元素，包括before和(hé)after僞元素。
transition-timing-function 動畫的(de)執行方式
值:ease(逐漸慢下來)，linear(勻速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(先慢到快再到慢)，cubic-bezier(該值允許你去(qù)自(zì)定義一(yī)個時間曲線)。
transition-delay 動畫延時時間基本用法與duration相同。
語法:
transition: <transition> [, <transition>]*
<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
這種寫法是比較簡單的(de)寫法，我們也可(kě)以同時寫多個Transition效果，每個效果按照固定屬性的(de)順序書寫如(rú)圖。
實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<style>
.fk{
position:absolute;
left:0;
background:#00F;
width:50px;
height:50px;
}
.fk:hover{
position:absolute;
left:500px;
background:#F00;
}
.fk,fk:hover{
transition:background-color 3s ease,left 3s ease-in-out;
}
</style>
</head>
<body>
<div class="fk">
<div>
</body>
</html>該效果将以一(yī)個方塊從左向右移動并改變顔色
【opacity屬性】
也是一(yī)個css3屬性，該屬性用于設置元素的(de)不透明度級别，所有的(de)浏覽器都支持這個屬性。
語法：opacity: value|inherit;
參數說明：
value ：規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。
inherit：應該從父元素繼承 opacity 屬性的(de)值。
例如(rú)設置一(yī)個圖像的(de)透明度：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 針對 IE8 以及更早的(de)版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 針對 IE8 以及更早的(de)版本 */
}IE9, Firefox, Chrome, Opera 和(hé) Safari 使用屬性 opacity 來設定透明度。opacity 屬性能夠設置的(de)值從 0.0 到 1.0。值越小
，越透明。
IE8 以及更早的(de)版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的(de)值從 0 到 100。值越小，越透明。
- 上一(yī)篇：帝國CMS數據庫語句獲取當前欄目ID
- 下一(yī)篇：Centos7搭建pptp一(yī)鍵安裝腳本
