css3，js动画初体验

1. transition实现简单的过渡动画
2. @keyframes实现更详细的动画
3. WAAPI实现动画

使用transiton来创建动画

语法：
transition: css-property duration timing-function delay
每个属性的意思和使用@keyframes中的讲解是一样的。
举个例子

-webkit-transiton: background 2s linear 2s,
                   border-radius 3s ease-in 4s;
transiton: background 2s linear 2s,
           border-radius 3s ease-in 4s;       

当然了，可以不一个一个的指定需要过渡的属性，直接用all来代替

transition: all 2s;

如果你是用all来代替的，那还可以写的更简单些，就像下面这样的

transition: 2s;

因为 transition: css-property duration timing-function delay
中，除了duration没有默认值外，其他的都有默认值。
css-property：默认值all
timing-function：默认值ease
delay：默认值0
而且这些属性是没有顺序限制的，可以随便写，就像这样的。

transition: ease-out 2s width;

但是如果同时制定了duration和delay两个时间，那么前面的一个时间代表的是动画持续时间duration，后面的一个时间是延迟时间delay。

使用@keyframes来创建动画

语法：@keyframes identify{}
由于目前已经得到了各大浏览器很好的支持，所以对于移动端的开发可以无需添加浏览器前缀

如果你非要添加前缀，应该是这样的
@-webkit-keyframes identify{},
@-moz-keyframes identify{}

看个简单的例子

@keyframes show{
    0%{
        -webkit-transform: translate3d(-1120px, 0, 0);
            transform: translate3d(-