The following example shows a 100px * 100px red <div> element. There is a transition effect applied to the width property of the element, with a duration of 2 seconds:
transition: width 2s;
A new value for the width property has been specified whenever a user mouses over the <div> element:
div:hover {width: 300px;}
As shown in the example below, the transition effect starts when the specified CSS property (width) changes value.
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { width: 100px; height: 100px; padding: 5px; background: red; -webkit-transition: width 2s; /* Safari */ transition: width 2s; } div:hover { width: 300px; } </style> <body> <p>Hover over the <div> element below, to see the transition effect.</p> <div>Mouse over me and see what I can do!</div> <p>Notice that when the cursor moves off the element, it gradually changes back to its original style.</p> </body> |
Hover over the <div> element below, to see the transition effect. Mouse over me and see what I can do!
Notice that when the cursor moves off the element, it gradually changes back to its original style. |
Note: If the duration part is not specified, the transition will have no effect, because the default value is 0. Also note that this example doesn't work in Internet Explorer 9 and earlier versions.
