標籤：
【transition-duration】
是一個css3屬性，規定完成過度效果需要花費的時間（一秒或毫秒計）。
文法：transition-duration: time;
time ： 規定完成過渡效果需要花費的時間（以秒或毫秒計）。 預設值是 0，意味著不會有效果。
該屬性其實是transition屬性的一個子屬性，下面總結一下css3中的transition屬性：
【transition】
用於在一定的時間內平滑的過度，這種效果可以在按一下滑鼠，擷取焦點，被點擊或對元素任何改變中觸發，並圓滑的以動畫效果改變CSS屬性的屬性值。
從定義可以知道transition是一個用於動畫過度的屬性，然而transiton屬性只不過是一個簡寫屬性，用於設定四個過度屬性，這
四個過度屬性分別是:
transition-property (執行變換的屬性 )
transition-duration (變換延續時間)
transition-timing-function (延續時間內，變換速率的變化)
transition-delay (變換延遲時間)
下面來分別介紹一下各個屬性
transition-property 即用來指定當元素其中一個屬性改變是執行transition效果
值:none(沒有屬性改變)，all(所有屬性都改變)或指定某一元素(比如color，background等屬性)。
transition-duration 是動畫執行的時間，單位(s)比如"0.1s"也可以寫成".1s"，它可以作用於任何元素，包括before和after偽元素。
transition-timing-function 動畫的執行方式
值:ease(逐漸慢下來)，linear(勻速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(先慢到快再到慢)，cubic-bezier(該值允許你去自訂一個時間曲線)。
transition-delay 動畫延時時間基本用法與duration相同。
文法:
transition: <transition> [, <transition>]*
<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
這種寫法是比較簡單的寫法，我們也可以同時寫多個Transition效果，每個效果按照固定屬性的順序書寫。
執行個體：
<!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>
該效果將以一個方塊從左向右移動並改變顏色
【opacity屬性】
也是一個css3屬性，該屬性用於設定元素的不透明度層級，所有的瀏覽器都支援這個屬性。
文法：opacity: value|inherit;
參數說明：
value ：規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。
inherit：應該從父元素繼承 opacity 屬性的值。
例如設定一個映像的透明度：
img{opacity:0.4;filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* 針對 IE8 以及更早的版本 */}
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設定透明度。opacity 屬效能夠設定的值從 0.0 到 1.0。值越小
，越透明。
IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。
css3——transition屬性和opacity屬性
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
