最新的Web开发教程
 

Style transition Property

<Style对象

将鼠标悬停在一个div元素,逐步改变其外观:

document.getElementById("myDIV").style.transition = "all 2s";
试一试»

定义和用法

过渡属性是四个转变特性,速记属性:

transitionProperty,transitionDuration,transitionTimingFunction和transitionDelay。

Note:始终指定transitionDuration财产,否则持续时间为0,并过渡不会有任何效果。


浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

过渡属性在Internet Explorer 10,火狐,Opera和Chrome浏览器的支持。

Safari支持替代,WebkitTransition属性。

注:在Internet Explorer 9及更早版本不支持的过渡性质。

句法

返回的过渡性质:

object .style.transition

设置过渡性质:

object .style.transition=" 属性值
描述
transitionProperty 指定CSS属性的过渡效果是名
transitionDuration 指定过渡效果多少秒或毫秒需要完成
transitionTimingFunction 指定的过渡效果,速度曲线
transitionDelay 定义时,过渡效果将开始
initial 将此属性设置为默认值。 阅读关于初始
inherit 继承其父元素此属性。 阅读关于继承

技术细节

默认值: 所有0 0轻松
返回值: 一个字符串,表示元素的过渡属性
CSS版本 CSS3

相关页面

CSS参考: transition property


<Style对象