This allows you to make super nice rollover effects in the properties of an element by eliminating the need to use javascript.
Syntax for CSS 3 Transitions:
The specification of the CSS3 introduces the new ownership transition which allows you to clearly specify the transitions you want. The basic syntax is:
.style {
transition: property time easing;
}
Where:
- Property: is the property to be applied (color, width, etc.).
- Time: duration in seconds of the transition
- Easing: type of acceleration of the animation (ease, linear, ease-in, ease-out, ease-in-out, etc)
Obviously this code only works in browsers that have implemented the CSS3 specification, then so that the current browsers could interpret it, it is necessary to add specific lines in accordance with every browser.
Example:
.style {
-webkit-transition: property time easing; /* Safari 3.2+, Chrome */
-moz-transition: property time easing; /* Firefox 4.0+ */
-o-transition: property time easing; /* Opera 10.5+ */
transition: property time easing;
}
This ensures that the transitions will be properly seen in chrome, safari 3.2+ , Firefox 4.0+ and Opera 10.5+. In the other cases, including IE 9 and earlier, you will not see the transition, you will see an abrupt change from one to another state, which is not big deal.
Vimax
05. September, 2012 | #
Thanks for sharing your thoughts about CSS.
Regards
Oslo
04. September, 2012 | #
Pretty nice post. I just stumbled upon www.bwired.ca and wanted to say that I have truly enjoyed browsing your blog posts. After all I'll...