CSS transition 屬性

定義和用法

transition 屬性是一個簡寫屬性，用于設置四個過渡屬性：

注釋：請始終設置 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。

另請參閱：

CSS 教程：CSS 過渡

HTML DOM 參考手冊：transition 屬性

實例

把鼠標指針放到 div 元素上，其寬度會從 100px 逐漸變為 300px：

div {
  width: 100px;
  transition: width 2s;
}

親自試一試

CSS 語法

transition: property duration timing-function delay;

屬性值

值 描述
transition-property 規定設置過渡效果的 CSS 屬性的名稱。
transition-duration 規定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 定義過渡效果何時開始。

技術細節

默認值： all 0 ease 0
繼承性： no
版本： CSS3
JavaScript 語法： object.style.transition="width 2s"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

帶 -webkit-、-moz- 或 -o- 的數字表示使用前綴的首個版本。

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-