css3 transition

W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

transition 主要有四个参数

transition-property
检索或设置对象中的参与过渡的属性(全部就写all), 具体参照css手册
transition-duration
检索或设置对象过渡的持续时间
transition-timing-function
检索或设置对象中过渡的动画类型
transition-delay
检索或设置对象延迟过渡的时间

transition-timing-function 参数介绍

linear: 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease: 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in: 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out: 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out: 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内。

下面的例子会很好的理解这几个函数

<div class="transition-container">
	<div class="linear small">linear</div>
	<div class="ease small">ease</div>
	<div class="ease-in small">ease-in</div>
	<div class="ease-out small">ease-out</div>
	<div class="ease-in-out small">ease-in-out</div>
</div>

div.small {
    border: 3px solid #B1B6B9;
    border-radius: 10px;
    background-color: #ED8029;
    color: white;
    text-align: right;
    padding: 5px;
    width: 100px;
    cursor: pointer;
}

.linear {
	-webkit-transition: 3s linear;
	-moz-transition: 3s linear;
	-o-transition: 3s linear;
	-ms-transition: 3s linear;
	transition: 3s linear;
}

.ease {
	-webkit-transition: 3s ease;
	-moz-transition: 3s ease;
	-o-transition: 3s ease;
	-ms-transition: 3s ease;
	transition: 3s ease;
}

.ease-in {
	-webkit-transition: 3s ease-in;
	-moz-transition: 3s ease-in;
	-o-transition: 3s ease-in;
	-ms-transition: 3s ease-in;
	transition: 3s ease-in;
}

.ease-out {
	-webkit-transition: 3s ease-out;
	-moz-transition: 3s ease-out;
	-o-transition: 3s ease-out;
	-ms-transition: 3s ease-out;
	transition: 3s ease-out;
}

.ease-in-out {
	-webkit-transition: 3s ease-in-out;
	-moz-transition: 3s ease-in-out;
	-o-transition: 3s ease-in-out;
	-ms-transition: 3s ease-in-out;
	transition: 3s ease-in-out;
}

.transition-container:hover div.small {
	width: 100%;
}

把鼠标放到图片上看效果

linear

ease

ease-in

ease-out

ease-in-out

再来个例子，把鼠标放到图片上看效果

.css3-transition-div {
	cursor: pointer;
	width: 300px;
	height: 220px;
	border: 3px solid #B1B6B9;
	box-shadow: 5px 5px 5px #888888;
	transition: transform:scale 0.9s ease-in;
	background: url(../images/autumn.png) no-repeat;
}

.css3-transition-div:hover {
	transform: scale(0.4, 0.4);
}

<div class="css3-transition-div"></div>