HTML DOM教程

HTML DOM 简介 HTML DOM 节点 HTML DOM 方法 HTML DOM 属性 HTML DOM 访问 HTML DOM 修改 HTML DOM 修改 HTML 内容 HTML DOM 元素 HTML DOM 事件 HTML DOM 导航 HTML DOM 总结 HTML DOM 对象

transition

Style transition 属性

实例

把鼠标指针悬停在 div 元素上，它的外观会逐渐改变：

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

定义和用法

transition 属性是一个速记属性，用于设置四个过渡属性：

transitionProperty、 transitionDuration、 transitionTimingFunction 和 transitionDelay.

注意：请始终设置 transitionDuration 属性，否则持续时间为 0，就不会产生过渡效果。

浏览器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持另一个可替代该属性的属性，即 WebkitTransition 属性。

注意：Internet Explorer 9 及其之前的版本不支持 transition 属性。

语法

返回 transition 属性：

object.style.transition

设置 transition 属性：

object.style.transition="property duration timing-function delay|initial|inherit"

属性值

值	描述
transitionProperty	规定应用过渡效果的 CSS 属性的名称。
transitionDuration	规定完成过渡效果需要多少秒或毫秒。
transitionTimingFunction	规定过渡效果的速度曲线。
transitionDelay	定义过渡效果何时开始。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

技术细节

默认值：	all 0 ease 0
返回值：	字符串，表示元素的 transition 属性。
CSS 版本	CSS3

CSS 参考手册：transition 属性

transition

Style transition 属性

实例

定义和用法

浏览器支持

语法

属性值

技术细节

相关文章