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>