HTML DOM Style transition properties
Examples
The mouse pointer hovers over the div element, it will gradually change its appearance:
document.getElementById("myDIV").style.transition="all 2s";
try it"
Definition and Usage
transition property is a shorthand property for setting the four transition properties:
transitionProperty, transitionDuration, transitionTimingFunction and transitionDelay.
Note: Always set transitionDuration property, otherwise the duration is zero, it will not produce transition effects.
Browser Support
Internet Explorer 10, Firefox, Opera and Chrome support the transition property.
Safari supports another alternative of the property attribute that WebkitTransition property.
Note: Internet Explorer 9 and earlier versions do not support the transition property.
grammar
Returns transition attributes:
object .style.transition
Set the transition properties:
object .style.transition="property duration timing-function delay|initial|inherit"
Property Value
| 值 | 描述 |
|---|---|
| transitionProperty | 规定应用过渡效果的 CSS 属性的名称。 |
| transitionDuration | 规定完成过渡效果需要多少秒或毫秒。 |
| transitionTimingFunction | 规定过渡效果的速度曲线。 |
| transitionDelay | 定义过渡效果何时开始。 |
| initial | 设置该属性为它的默认值。请参阅 initial 。 |
| inherit | 从父元素继承该属性。请参阅 inherit 。 |
technical details
| Defaults: | all 0 ease 0 |
|---|---|
| return value: | String representing the transition element attributes. |
| CSS version | CSS3 |
related articles
CSS Reference: Transition Properties