With the help of CSS3 new properties, we can transit an element from one position to another with the help of few properties.
It provide you to control the values of the element property for a particular duration of time.
There are two steps involved the transition of an element:
1. The property that we want to add
2. The duration
We have to use -webkit, -moz, etc certain prefix as an property for certain browsers.
HTML:
<div class="transit"></div>
CSS3:
div.transit {
width: 100%;
height: 100px;
background: blue;
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
/* Standard syntax */
transition-property: height;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
cursor:pointer;
}
div.transit:hover {
height: 500px;
}
You can also download the demo attached.
0 Comment(s)