CSS3 transition Property

1.transition

    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)"
	});
})