The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height. The syntax used is:
transition: width 2s, height 4s;
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { width: 100px; height: 100px; padding: 5px; background: red; -webkit-transition: width 2s, height 4s; /* Safari */ transition: width 2s, height 4s; } div.hover { width: 300px; height: 300px; } </style> <body> <div>Move your cursor over this element!</div> <p>Hover over the div element above, to see the transition effect.</p> <p>Notice how the element returns to its original state when the cursor moves off it.</p> </body> |
Move your cursor over this element!
Hover over the div element above, to see the transition effect. Notice how the element returns to its original state when the cursor moves off it. |
Hey, this is pretty cool, how the table cell border moves to make room for the transition taking place inside of it!
