[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)»[过渡属性](#)» 相关内容： [**其它过渡属性参考**选择其它项](#) - [transition](#) - [transition-property](#) - [transition-duration](#) - [transition-timing-function](#) - [transition-delay](#) # transition - **版本：CSS3** - 继承性：无 ### 语法： **transition**：[ [transition-property](#) ] || [ [transition-duration](#) ] || [ [transition-timing-function](#) ] || [ [transition-delay](#) ] **默认值**：看每个独立属性 ### 取值： [ [transition-property](#) ]：检索或设置对象中的参与过渡的属性[ [transition-duration](#) ]：检索或设置对象过渡的持续时间[ [transition-timing-function](#) ]：检索或设置对象中过渡的动画类型[ [transition-delay](#) ]：检索或设置对象延迟过渡的时间 ### 说明： **复合属性。检索或设置对象变换时的过渡。** - 可以为同一元素的多个属性定义过渡效果。示例： **缩写方式：** ~~~ transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s; ~~~ **拆分方式：** ~~~ transition-property:border-color, background-color, color; transition-duration:.5s, .5s, .5s; transition-timing-function:ease-in, ease-in, ease-in; transition-delay:.1s, .1s, .1s; ~~~ - 如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写： **拆分方式：** ~~~ transition-property:border-color, background-color, color; transition-duration:.5s; transition-timing-function:ease-in; transition-delay:.1s; ~~~ - 如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值，据此可以对上面的例子进行缩写： **缩写方式：** ~~~ transition:all .5s ease-in .1s; ~~~ **拆分方式：** ~~~ transition-property:all; transition-duration:.5s; transition-timing-function:ease-in; transition-delay:.1s; ~~~ - 对应的脚本特性为**transition**。 ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>版本</th> <td class="unsupport">6.0-9.0</td> <td rowspan="2" class="experimentsupport">4.0-9.0</td> <td rowspan="2" class="experimentsupport">5.1</td> <td rowspan="2" class="experimentsupport">13.0-16.0</td> <td rowspan="2" class="experimentsupport">11.50-11.60</td> </tr><tr><th>版本</th> <td class="experimentsupport">10.0</td> </tr></tbody></table> ### 写法： | 内核类型 | 写法 | |-----|-----| | Webkit(Chrome/Safari) | -webkit-transition | | Gecko(Firefox) | -moz-transition | | Presto(Opera) | -o-transition | | Trident(IE) | -ms-transition | | W3C | transition | ### 示例： # 请将鼠标移动到下面的矩形上： - 背景色过渡 - 背景色过渡 - 背景色过渡 - 背景色过渡 - 背景色过渡 Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved