css基础篇-过渡

// css

.trans-div{
	width: 300px;
	height: 200px;
	background-color: red;
	/*  过渡属性，给哪个属性添加过渡 	*/
	-webkit-transition-property:all;
	-moz-transition-property:all;
	-ms-transition-property:all;
	-o-transition-property:all;
	/*  过渡时间，变化的总时长  */
	transition-duration: 3s;
	/* 过渡延迟，几秒之后执行过渡动画 */
	transition-delay: 1s;
	/* 变化的方式：快->慢，慢->快，慢->快->慢,贝塞尔曲线；*/
	transition-timing-function: cubic-bezier(0, 1.07, 0.71, 1.01);
	-webkit-transition: 1s ease all;
	-moz-transition: 1s ease all;
	-o-transition: 1s ease all;
}
.trans-div:hover{
	width: 400px;
	height: 300px;
	background-color: blue;
}


// html

<div class="trans-div"></div>

效果图