-
css教程之transition-duration [過渡時間]
- 2017-05-26 00:01 來源：未知
transition-duration用來定義轉換動畫的時間長度，即從舊屬性換到新屬性花費的時間，單位為秒。
默認情況下動畫過渡時間為0秒，所以當我們指定元素動畫時會看不到過渡的過程直接看到結果。
語法
transition-duration:<time>[ ,<time>]*;設置動畫的過渡時間。
| 語法項目 | 說明 |
|---|---|
| 初始值 | 0 |
| 適用于 | 所有元素，以及:before和:after偽元素 |
| 可否繼承 | 否 |
| 媒介 | 視覺 |
| 版本 | CSS3.0 |
說明
transition-duration可以設置動畫過渡的時間[執行時間]，默認值0表示不過渡直接看到執行后的結果。單位是秒，也可以是毫秒。
取值
0：不執行過渡，直接看到結果。
time：指定動畫執行的時間。
實例代碼
CSS
- .transition_property_1{
- -webkit-transition:ease all;
- -moz-transition:ease all;
- -webkit-transition-duration:0;
- -moz-transition-duration:0;
- position:absolute;
- left:10px;
- top:50px;
- }
- .transition_property_2{
- -webkit-transition:ease all;
- -moz-transition:ease all;
- -webkit-transition-duration:5s;
- -moz-transition-duration:5s;
- position:absolute;
- left:250px;
- top:50px;
- }
- .transition_property_1:hover,
- .transition_property_2:hover{
- width:500px;
- height:300px;
- }
復制
HTML
運行一下 »- <div class="demo_box transition_property_1">動畫沒有過渡時間</div>
- <div class="demo_box transition_property_2">動畫執行5秒</div>
復制
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |
最新更新
unittest的TestCase類提供的判斷方法
python基礎教程之unittest模塊（單元測試）
python基礎教程之Python的特點（優點和缺點
python基礎教程之Python是什么，Python簡介
python基礎教程之編譯型語言和解釋型語言
python基礎教程之編程語言是什么
python基礎教程之Python assert斷言函數及用法
python基礎教程之Python 文件 truncate() 方法
python基礎教程之Python 文件 write() 方法
python基礎教程之Python 文件 writelines() 方法
基于UDP的服務器端和客戶端
再談UDP和TCP
在socket編程中使用域名
網絡數據傳輸時的大小端問題
socket編程實現文件傳輸功能
如何優雅地斷開TCP連接？
圖解TCP四次握手斷開連接
詳細分析TCP數據的傳輸過程
圖解TCP數據報結構以及三次握手（非常詳
TCP協議的粘包問題（數據的無邊界性）
sql語句大全之Microsoft SQL Server 2012安裝說明
sql語句大全之隨機姓名生成方法
sql語句大全之SQL干貨筆記
access數據庫之隨說秋色園從Access升遷到
access數據庫之微信公眾平臺開發(26) ACCE
access數據庫之ACCESS TOKEN
access數據庫之當爬蟲被拒絕時(Access Deni
access數據庫之當爬蟲被拒絕時(Access Deni
access數據庫之使用PowerDesigner生成Access數據
access數據庫之讓ADO.NET Entity Framework 支持