CSS3 transition property
Examples
Hover over a div element, and gradually change the table's width from 100px to 300px ::
div
{
width: 100px;
transition: width 2s;
-webkit-transition: width 2s; / * Safari * /
}
div: hover {width: 300px;}
{
width: 100px;
transition: width 2s;
-webkit-transition: width 2s; / * Safari * /
}
div: hover {width: 300px;}
try it"
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Attribute definitions and instructions
transition property is a shorthand property has four attributes: transition-property, transition-duration, transition-timing-function, and transition-delay.
Note: Always specify transition-duration property, otherwise duration of 0, transition will have no effect.
Defaults: | all 0 ease 0 |
---|---|
inherit: | no |
version: | CSS3 |
JavaScript syntax: | object .style.transition = "width 2s" |
grammar
transition: property duration timing-function delay;
值 | 描述 |
---|---|
transition-property | 指定CSS属性的name,transition效果 |
transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 定义transition效果开始的时候 |