CSS3 transition 屬性

實(shí)例

將鼠標(biāo)懸停在一個(gè) div 元素上，逐步改變表格的寬度從 100px 到 300px：:

div { width:100px; transition: width 2s; -webkit-transition: width 2s; /* Safari */ } div:hover {width:300px;}

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

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

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

transition 屬性設(shè)置元素當(dāng)過(guò)渡效果，四個(gè)簡(jiǎn)寫(xiě)屬性為：

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

默認(rèn)值：	all 0 ease 0
繼承：	no
版本：	CSS3
JavaScript 語(yǔ)法：	object.style.transition="width 2s"

transition: property duration timing-function delay;

值	描述
transition-property	指定CSS屬性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的轉(zhuǎn)速曲線
transition-delay	定義transition效果開(kāi)始的時(shí)候

其他擴(kuò)展

上一篇：CSS3 backface-visibility 屬性下一篇：CSS3 transition-property屬性