CSS3动画详解：animation与transition的区别与应用

动画属性：animation
                 animation  transition
                 相同点：都是随着时间改变元素的属性值。
                 不同点：transition需要触发一个时间（hover事件或click事件等）才会随时间改变其css属性；
                  animation-name（必要的）
                  检索或设置对象所应用的动画名称
                  必须与规则@keyframes配合使用，
                  定义关键帧：
                   @keyframes mymove{}animation-name:mymove;
                       语法一：@keyframes mymove{
                                                                        from{初始状态属性}
                                                                        to{结束状态属性}
                                                                         }
                        语法二：{
                                         0%{初始状态属性}
                                     100%{结束状态属性}
                                      }   
                   animation-delay
                                   检索或设置对象动画延迟的时间（s，ms）
                                   说明：animation-delay：0.5s；动画开始前延迟的时间为0.5s
                   animation-timing-function
                                   检索或设置对象动画的过渡类型
                                   属性值：
                                   linear：线性过渡。等同于贝塞尔曲线（0.0，0.0，1.0，1.0）
                                   ease：平滑过渡。等同于贝塞尔曲线（0.25，0.1，0.25，1.0）
                                   ease-in：由慢到快。
                                   ease-out：由快到慢
                                   ease-in-out：由慢到快再到慢
                                   step-start：马上跳到动画每一结束帧的状态（实现逐帧动画效果）
                     animation-iteration-count