To use these transitions in your code, you must specify two things:
- Specify the CSS property you want to add an effect to
- Specify the duration of the effect.
Example
Transition effect on the width property, duration: 1 second:
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
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 (:hover) an element:
#id_of_element:hover {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Example
Fading menu item gradually from dark grey to light grey.
Here are a few other CSS3 elements that you can go and explore:
- User Interface – box sizing, resize, outline
- Borders – colors, images, radius and shadows
- Backrounds – size, multiple
- Colors – opacity and color variants
- Text Effects – shadows, overflows and word wrapping
To learn more about CSS3 visit http://www.css3.info/
