With CSS3, we can add an effect when changing from one style to another, without using Flash
Mouse Cursor over the element below:
Internet Explorer and Firefox does not yet support the transition property.
Chrome and Safari requires the prefix -webkit-. Opera requires the prefix -o-.
CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:
Transition effect on the width property, duration: 2 seconds:
Note: If the duration is not specified, the transition will have no effect, because
default value is 0.
The effect will start when the specified CSS property changes value. A typical CSS property
change would be when a user mouse-over an element:
Specify :hover for <div> elements:
Note: When the cursor mouse out of the element, it gradually changes back to it's original
To add a transitional effect for more than one style, add more properties, separated by
Add effects on the width, height, and the transformation:
The Below table lists all the transition properties:
The two examples below sets all transition properties:
Use all transition properties in one example:
The same transition effects as above, using the shorthand transition property:
Your Query was successfully sent!