css3 transition

css3 transition
须要4个参数 
transition-property, transition-duration, transition-timing-function, and transition-delay。
参数意思：（1）指定要添加效果的css属性 （2）持续时间 （3）效果的转速曲线（4）推迟执行的时间

其中第三个参数transition-timing-function主要有
一、linear：匀速
二、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)）。

列子

<div class="box">
			<div class="outopen">
				<span>close</span>
				<div class="openTwo"></div>
			</div>
		</div>

<style type="text/css">
			.outopen{width: 100px;height: 50px;border-radius: 25px;position: relative;background: rgba(0,184,0,0.8); transition: all .3s ease-in-out;}
			.outopen span{line-height: 50px;color: #fff;padding-left: 12px;font-size: 14px;text-shadow:2px 1px 2px rgba(36,102,6,1.0);font-family:"Arial";}
			.openTwo{width: 50px;height: 50px;border-radius: 50%;position: absolute;box-shadow: 0px 2px 4px rgba(0,0,0,0.4);background: #fff;top: 0px;left: 50px;cursor: pointer;transition: left .3s ease-in-out;}
			.box.active .outopen{box-shadow: 0px 0px 4px rgba(0,0,0,0.4);background: #fafafa;}
			.box.active .openTwo{left: 0px;}
			.box.active .outopen span{color: #666;padding-left: 58px;text-shadow:0px 1px 0px rgba(0,0,0,0.4)}
		</style>

<script type="text/javascript">
		$(function(){
			var b1=true;
			$(".box").click(function(){
			$(".box").toggleClass("active");
				if(b1==true){
				$(".outopen span").text("open");
				b1=false;
				}else{
				$(".outopen span").text("close");
				b1=true;
				}
			});
		})
		
		</script>