Talk about powerful new features in cascading style sheets (CSS): By pairing the :hover pseudo-class with the CSS3 transition property, you can add slick interactive features to your objects without the use of Flash, JavaScript, or jQuery!
The transition property actually has four settings, which should be written in the CSS in the following order: property, duration, timing-function, delay.
The following list describes the settings:
transition-property: Identifies which CSS property will alter, such as the width or height, as in transition-property:width;.
transition-duration: Sets the value in seconds for the transition to complete, as in transition-duration: 5s;.
transition-timing-function: Specifies the speed curve of the effect. Values may be set to linear, ease, ease-in, ease-out, ease-in-out, or cubic-bezier(n,n,n,n), as in this example: transition-timing-function: linear;, which is equivalent to cubic-bezier(0,0,1,1).
transition-delay: Determines how many seconds will elapse before the effect begins, as in transition-delay: 2s;.
In the following code example, after a 2-second delay, an orange box smoothly changes over 5 seconds from 100px to 500px wide when a visitor hovers the mouse over the <!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
width:100px;
height:100px;
background-color: #F90;
transition: width 5s linear 2s;
-moz-transition: width 5s linear 2s; /* Firefox 4 */
-webkit-transition: width 5s linear 2s; /* Safari & Chrome */
-o-transition: width 5s linear 2s; /* Opera */
}
div:hover { width:500px; }
</style>
</head>
<body>
<div></div>
</body>
</html>
