Home > Developer > Web Develop
Transition properties
The following table lists all the conversion properties:
| Properties | Description | CSS |
|---|---|---|
| Transition | Shorthand property, which is used to set four transition properties in one property. | 3 |
| Transition-property | Specifies the name of the CSS property that the transition is applied to. | 3 |
| Transition-duration | Defines the time that the transition effect takes. The default is 0. | 3 |
| Transition-timing-function | A time curve that specifies the transition effect. The default is "ease". | 3 |
| Transition-delay | Specifies when the transition effect begins. The default is 0. | 3 |
<!DOCTYPE HTML><HTML><Head><style>Div{width:100px;Height:100px;background:Yellow;Transition-property:width;transition-duration:1s;transition-timing-function:Linear;Transition-delay:2s;/*Firefox 4*/-moz-transition-property:width;-moz-transition-duration:1s;-moz-transition-timing-function:Linear;-moz-transition-delay:2s;/*Safari and Chrome*/-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:Linear;-webkit-transition-delay:2s;/*Opera*/-o-transition-property:width;-o-transition-duration:1s;-o-transition-timing-function:Linear;-o-transition-delay:2s;}Div:hover{width:200px;}</style></Head><Body><Div></Div><P>Please place the mouse pointer over the yellow DIV element to see the transition effect.</P><P><b>Comments:</b>This example is not valid in Internet Explorer.</P><P><b>Comments:</b>This transition effect waits two seconds before starting.</P></Body></HTML>
HTML 5 Transition Properties Height width color style etc...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
