# CSS3 transition 属性 ## 实例 把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px： ``` div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } ``` ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。 Safari 支持替代的 -webkit-transition 属性。 注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。 ## 定义和用法 transition 属性是一个简写属性，用于设置四个过渡属性： * transition-property * transition-duration * transition-timing-function * transition-delay 注释：请始终设置 [transition-duration](/cssref/pr_transition-duration.asp "CSS3 transition-duration 属性") 属性，否则时长为 0，就不会产生过渡效果。 | 默认值： | all 0 ease 0 | | --- | --- | | 继承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 语法： | _object_.style.transition="width 2s" | | --- | --- | ## 语法 ``` transition: _property_ _duration_ _timing-function_ _delay_; ``` | 值 | 描述 | | --- | --- | | [transition-property](/cssref/pr_transition-property.asp "CSS3 transition-property 属性") | 规定设置过渡效果的 CSS 属性的名称。 | | [transition-duration](/cssref/pr_transition-duration.asp "CSS3 transition-duration 属性") | 规定完成过渡效果需要多少秒或毫秒。 | | [transition-timing-function](/cssref/pr_transition-timing-function.asp "CSS3 transition-timing-function 属性") | 规定速度效果的速度曲线。 | | [transition-delay](/cssref/pr_transition-delay.asp "CSS3 transition-delay 属性") | 定义过渡效果何时开始。 |