进入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%……

开篇我就写这些，感兴趣的可以继续看下一篇，以后会更新。