CSS3 transition-property 屬性

2022-06-02 17:23 更新

CSS3 transition-property屬性

屬性定義及使用說明

transition-property屬性指定CSS屬性的nametransition效果(transition效果時將會啟動指定的CSS屬性的變化)。

提示:一個轉場效果,通常會出現在當用戶將鼠標懸停在一個元素上時。

注意:始終指定transition-duration屬性,否則持續(xù)時間為0,transition不會有任何效果。

默認值: all
繼承: no
版本: CSS3
JavaScript 語法: object.style.transitionProperty="width,height"

語法

transition-property: none|all| property;
描述
none 沒有屬性會獲得過渡效果。
all 所有屬性都將獲得過渡效果。
property 定義應用過渡效果的 CSS 屬性名稱列表,列表以逗號分隔。

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

屬性          
transition-property 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

實例

實例

將鼠標懸停在一個div元素上,逐步改變表格的寬度:

div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}

div:hover {width:300px;}

嘗試一下 ?
在此頁底部有更多的例子。

Examples

更多實例

轉換效果 - 更改兩個屬性
將鼠標懸停在一個div元素上,更改寬度和高度用平穩(wěn)過渡效果。


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號