css3 transition

<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>

	.trans1{
	-webkit-transition:0.5s ease;
	-moz-transition:0.5s ease;
	-webkit-transition-property:all;
	-moz-transition-property:all;
	position:absolute;
	left:10px;
	top:50px;
	height:100px;
	100px;
	background:#ef4900;
	color:white;
	}
	.trans2{
	-webkit-transition:0.5s ease-in-out;
	-moz-transition:0.5s ease-in-out;
	-webkit-transition-property:width;
	-moz-transition-property:width;
	position:absolute;
	left:350px;
	top:50px;
	height:100px;
	100px;
	background:blue;
	color:yellow;
	}
	.trans3{
	-webkit-transition:0.5s ease;
	-moz-transition:0.5s ease;
	-webkit-transition-property:height;
	-moz-transition-property:height;
	100px;
	height:100px;
	background:green;
	color:#ccc;
	position:absolute;
	left:780px;
	top:50px;

	}
	.trans1:hover{
	300px;
	height:300px;
	}
	.trans2:hover{
	300px;
	}
	.trans3:hover{
	height:300px;
	}
	</style>
	</head>
	<body>
	<div class="trans1">变换所有s属性</div>
	<div class="trans2">变换宽度属性</div>
	<div class="trans3">变换高度属性</div>
	<!-- transform呈现是一种变形结果，而transition呈现是一种过渡，通俗一点就是一种动画转化过程，如渐显，减弱、动画快慢等，transform，和transition是两种不同动画模型；
	1、transition的过渡属性：
	transition属性是一个间歇属性，用于设置四个过渡属性；
	语法
	transition：property duration timing-function delay；
	值描述transition-property规定设置过渡效果的css属性名称。
	transition-duration规定完成过渡效果需要的时间秒，或毫秒；
	transition-timing-function规定速度效果的速度曲线。
	transition-delay定义过渡效果何时开始
	transition-property；
	值：
	all：显示指对所有元素；
	none:表示没有元素；
	ident:制定css属性列表；
	注：请始终设置transition-duration属性，否则时长为0；就不会产生过渡效果，transform与transition此时效果一样
	transition：过渡属性名称过渡时间过度模式；
	transition-timing-function的五种值；
	1：ease逐渐变慢；
	2：liner：匀速；
	3：ease-in:缓慢开始（加速）；
	4：ease-out：缓慢结束（减速）；
	5：ease-in-out：缓慢开始，缓慢结束（先加速，或减速）；
	6：cubic-bezier 贝赛尔曲线（mathewlein.com/easer）;-->
	</body>
	</html>