The CSS3 transition properties can be specified one by one (the long way), or by using the shorthand property transition, such as:
transition: width 2s linear 1s;
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div.longway { width: 100px; height: 100px; padding: 5px; background: red; /* For Safari 3.1 to 6.0 */ -webkit-transition-property: width; -webkit-transition-duration: 2s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 1s; /* Standard syntax */ transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; } div.shorthand { width: 100px; height: 100px; padding: 5px; background: red; -webkit-transition: width 2s linear 1s; /* For Safari 3.1 to 6.0 */ transition: width 2s linear 1s; /* Standard syntax */ } div:hover { width: 300px; } </style> <body> <p>Hover over each <div> element above, to see the transition effects.</p> <div class="longway">This is done with the longway styling</div> <br /> <div class="shorthand">This is done with the shorthand styling</div> <p><b>Note:</b> The transition effect has a 1 second delay before starting.</p> </body> |
Hover over each <div> element above, to see the transition effects. This is done with the longway styling
This is done with the shorthand styling
Note: The transition effect has a 1 second delay before starting. |
Note: The shorthand for defining a transition is fairly lenient, the only requirement for the order being that the delay parameter must be stated after the duration value (but not necessarily immediately after). Furthermore, the transition-duration value is the only one that is actually required for the code to function; and because the default values of the other parameters are adequate most of the time.
