CSS3 transition Property
1.transition
Hover over a div element to gradually change the width and height
2.transform
Hover over a div element to gradually change the width and height
.box1{
width:100px;
height:120px;
background:red;
transition-property : width;
/* 5 */
transition-duration:5s;
/* webkit chrome Safari */
-webkit-transition-property : width,height;
-webkit-transition-duration : 5s;
/* moz FireFox */
-moz-transition-property : width,height;
-moz-transition-duration : 5s;
/* ms IE 9 */
-ms-transition-property : width,height;
-ms-transition-duration : 5s;
/* o Opera */
-o-transition-property : width,height;
-o-transition-duration : 5s;
}
.box1:hover{
width:200px;
height:400px;
}
.box2{
width:100px;
height:120px;
background:#333;
transition-duration: 5s;
-webkit-transition-duration: 5s;
-moz-transition-duration: 5s;
}
.box2:hover{
width:200px;
height:400px;
}
2.transform
.box{
width:100px;
height:120px;
background:red;
transform:translateX(200px);
-ms-transform:translateX(200px); /* IE 9 */
-moz-transform:translateX(200px); /* Firefox */
-webkit-transform:translateX(200px); /* Safari and Chrome */
-o-transform:translateX(200px); /* Opera */
}
$(".btn").click(function(){
$(".box").css({
"-webkit-transition-duration" : "3s",
"-webkit-transform" : "translateX(400px)",
"-moz-transition-duration" : "3s",
"-moz-transform" : "translateX(400px)"
});
})