CSS3：animation动画

animation只应用在页面上已存在的DOM元素上，学这个不得不学keyframes，我们把他叫做“关键帧”。

keyframes的语法法则：

        @keyframes flash {
            from{
               left:0;
            }
            50%{
              left:50px;
            }
            to{
              left:100px;
            }
        }

或

        @keyframes flash {
            0%{
               left:0;
            }
            50%{
              left:50px;
            }
            100%{
              left:100px;
            }
        }

为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器！

为了兼容更多浏览器，还需要加可恶的前缀：

@-moz-keyframes flash｛...｝　　　　　　　/* Firefox */

@-webkit-keyframes flash{...}　　　　　　/* Safari 和 Chrome */

@-o-keyframes flash{...}　　　　　　　 /* Opera */

animation可设置6个属性：

animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。(linear匀速、ease加速、ease-in慢到快、ease-out快到慢、ease-in-out低速开始低速结束)
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数， infinite--无限次播放
animation-direction 规定是否应该轮流反向播放动画。值normal--正常播放，值alternate--轮流返向播放

为了兼容更多浏览器，属性前还需要加可恶的前缀：

-moz-animation　　　　　/* Firefox */

-webkit-animation　　　　/* Safari 和 Chrome */

-o-animation　　　　　 /* Opera */

小实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .box{width:100px;height:100px;
            background: #000;
            position:relative;
            -webkit-animation: flash 5s ease-out;
                    animation: flash 5s ease-out;
        }
        @-webkit-keyframes flash {
            0%{
                top:0;
               left:0;
                background:red;
            }
            25%{
               left:200px;
                top:0;
                background: #000;
            }
            50%{
                top:200px; left:200px;
            }
            75%{
                top:200px; left:0;
            }
            100%{
              left:0;
                top:0
            }
        }
        @keyframes flash {
            0%{
                top:0;
               left:0;
                background:red;
            }
            25%{
               left:200px;
                top:0;
                background: #000;
            }
            50%{
                top:200px; left:200px;
            }
            75%{
                top:200px; left:0;
            }
            100%{
              left:0;
                top:0
            }
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

注意：Internet Explorer 9 以及更早的版本不支持 animation 属性