html开发技巧之css3动画世界

分类

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

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

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

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

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

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

还有一种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%……