過渡 - transition

過渡 - transition 是變形transfrom其中一種效果，定義爲一種狀態過渡到另外一種狀態的過程，今天學習到css3動畫，特此記錄下過渡的使用和一些效果。

實例1：

<div class="box"></div>
	<p>鼠標移動到 .box 元素上，查看過渡效果。</p>
複製代碼

.box{
		width: 100px;
		height: 100px;
		background: red;
		margin: 0 auto;	
		
		transition-duration: 1s;  /*花費時間*/
		transition-property: all; 
		transition-delay:0s; /* 延遲 */
		transition-timing-function: linear; /*勻速*/
	}
.box:hover{
		width:200px;
		background: #00FFFF;
	}
複製代碼

效果圖：

注：當指針移出元素時，它會逐漸變回原來的樣式。

實例2： 在例子中使用全部過渡屬性 - 使用簡寫

.box{
		.box{
			width: 100px;
			height: 100px;
			background: red;
			margin: 0 auto;	
			
			transition:1s all 0s linear;
		}
複製代碼

效果圖仍是這樣：

下面是個人簡單總結
總：
transition:2s all;
transition:2s 1s all linear；
注：1s是延遲 linear過渡的屬性

分開看：

1.transition:2s; 給它自己＋這個過渡的屬性：所需時間
2.transition-timing-function:linear; 勻速
5.transition: -delay timing-function -duration;

transition-timing-function 屬性

值	描述
linear	勻速
ease	慢快慢
ease-in	慢開始
ease-out	慢結束
ease-in-out	慢開始和結束

參考文章：
複製代碼

runoob