其实我做css3动画也没有多久，这篇文章目标人群是css3动画的新手，不喜勿喷。

分类

目前我接触到的css3动画有2类：一种是transition的，另一种是@keyframes的。

两者的区别就是，transition的动画表达是从一种状态到另一种状态，而@keyframes更加灵活，一个动画可以在不同进度表现成不同的状态。

当然，如果从操作的对象进行分类(就我目前接触的而言)，我想可以分3种，一种是html元素，一种是svg的，还有就是sprites的。

大家可能见过一个css3动画是关于一个会动的大象

大象的身体是由很多个`div`构成的，我们可以给每一个div都加上动画；

另一种是svg，美工用AI给你做一个图，图内有若干个已经命名的图层，图内的元素相应编好组，输出svg后，拖进编辑器，你就可以看到id名和图层命名相同的标签，看到编组后的标签，这时候你会发现，svg的元素和上面例子的div差不多，而且形状还不用自己想出来，美工已经帮你做好了，剩下来的就是你要给它加动画了；

还有一种sprites，美工把整个动画都用AE输出了，然后你只需要把动画扔到PS，把全部帧扔在一起做出一个长图，再通过变换background-position的属性，就可以做出动画效果了。

## 入门

> 最佳的入门选择就是`transition`。

transition意思是过渡，可以理解成从一种状态变成另一种状态。

这些状态包括很多，我自己没整理出来，暂时引用一下别人整理到的Transition 所支持的css属性.

像transition这个属性，我们经常用hover与它搭配，写好hover前后的变化，加上transition属性就可以让他们过渡了。

效果：

源码：

.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%……

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