CSS3 transition-property 屬性

2022-06-02 17:23 更新

CSS3 transition-property屬性

屬性定義及使用說明

transition-property屬性指定CSS屬性的nametransition效果（transition效果時(shí)將會(huì)啟動(dòng)指定的CSS屬性的變化）。

提示:一個(gè)轉(zhuǎn)場(chǎng)效果，通常會(huì)出現(xiàn)在當(dāng)用戶將鼠標(biāo)懸停在一個(gè)元素上時(shí)。

注意：始終指定transition-duration屬性，否則持續(xù)時(shí)間為0，transition不會(huì)有任何效果。

默認(rèn)值： all
繼承： no
版本： CSS3
JavaScript 語法： object.style.transitionProperty="width,height"

語法

transition-property: none|all| property;
值 描述
none 沒有屬性會(huì)獲得過渡效果。
all 所有屬性都將獲得過渡效果。
property 定義應(yīng)用過渡效果的 CSS 屬性名稱列表，列表以逗號(hào)分隔。

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

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

實(shí)例

實(shí)例

將鼠標(biāo)懸停在一個(gè)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

更多實(shí)例

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


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)