進入css3動畫世界（一）

其實我做css3動畫也沒有多久，這篇文章目標人群是css3動畫的新手，不喜勿噴。

分類

目前我接觸到的css3動畫有2類：一種是transition的，另一種是@keyframes的。

兩者的區別就是，transition的動畫表達是從一種狀態到另一種狀態，而@keyframes更加靈活，一個動畫可以在不同進度表現成不同的狀態。

當然，如果從操作的對象進行分類（就我目前接觸的而言），我想可以分3種，一種是html元素，一種是svg的，還有就是sprites的。

大家可能見過一個css3動畫是關於一個會動的大象

大象的身體是由很多個`div`構成的，我們可以給每一個div都加上動畫；

另一種是svg，美工用AI給你做一個圖，圖內有若干個已經命名的圖層，圖內的元素相應編好組，輸出svg后，拖進編輯器，你就可以看到id名和圖層命名相同的標簽，看到編組后的<g></g>標簽，這時候你會發現，svg的元素和上面例子的div差不多，而且形狀還不用自己想出來，美工已經幫你做好了，剩下來的就是你要給它加動畫了；

還有一種sprites，美工把整個動畫都用AE輸出了，然后你只需要把動畫扔到PS，把全部幀扔在一起做出一個長圖，再通過變換background-position的屬性，就可以做出動畫效果了。

## 入門 > 最佳的入門選擇就是`transition`。

transition意思是過渡，可以理解成從一種狀態變成另一種狀態。

這些狀態包括很多，我自己沒整理出來，暫時引用一下別人整理到的Transition 所支持的css屬性.

像transition這個屬性，我們經常用hover與它搭配，寫好hover前后的變化，加上transition屬性就可以讓他們過渡了。

效果：

源碼：

	<div class="shape width">改變寬</div>
	<div class="shape height">改變高</div>
	<div class="shape bg">改變背景</div>
	<div class="shape font">改變字體</div>
	<div class="shape bd-r">改變矩形角</div>
	<div class="shape translate">平移</div>
	<div class="shape shadow">改變陰影</div>
	<div class="shape rotate">旋轉</div>
	<div class="shape scale">縮放</div>

.shape{
	width: 100px;
	height: 100px;
	background: #777;
	float: left;
	margin-right: 3px;
	color: #fff;
	line-height: 100px;
	text-align: center;
	transition: 0.5s;
	border: 1px solid #555;
}
.width:hover{
	width: 200px;
}
.height:hover{
	height: 200px;
}
.bg:hover{
	background: #000;
}
.font:hover{
	font-size: 20px;
	color: yellow;
}
.bd-r:hover{
	border-radius: 50px;
}
.translate:hover{
	transform: translate(0,20px);
}
.shadow:hover{
	box-shadow: 0px 5px 5px #000;
}
.rotate:hover{
	transform: rotate(30deg);
}
.scale:hover{
	transform: scale(1.5,1.5);
}

進階

其實也算不上進階，@keyframes這個玩意大家稍微花點時間就能很輕易的學會了。

其實 @keyframes 的效果在特定條件下和 transition 一樣，就是只定義了 0%和100% 或者 from和to 狀態下的 @keyframes 和 transition 一樣。

源碼：（這個svg圖是我用AI畫出來的，感興趣的可以自己畫一個）

#change{
	display: block;		
	height: 100px;
	width: 50px;
	background: #999;
	transition: 0.3s;
}
#shape{
	width: 600px;
	height: 200px;
	margin-left: 50%;
	position: relative;
	left: -300px;
}
@keyframes rotate{
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}
.rotate{
	/*transition: 0.5s;*/
	transform-origin: 30px 30px;
	animation: rotate 10s linear infinite;
}

而@keyframes靈活的是，它還能定義中間的狀態，可以加個25%，50%，75%……

開篇我就寫這些，感興趣的可以繼續看下一篇，以后會更新。