动画

  animation: 动画名称   花费的时间      运动的曲线(动画的运动速度) 
            何时开始(是否有延迟)      播放次数        播放完后是否相反(默认是从正向);

注意第6个参数。默认是永远正向播放。
alternate 是第一次正向播放，第二次反向播放。
alternate-reverse   是第一次反向播放，第二次正向播放

-webkit-animation: move 1.6s linear 0s infinite;是为了兼容谷歌。safira浏览器哈。
通过前缀来兼容哈。

 效果：div从left=0的位置,跑到left=400，颜色从pink变成red，动画执行无数次。运动速度匀速:
  <style>
        .demo {
            text-align: center;
            line-height: 40px;
             100px;
            height: 40px;
            background: pink;
            position: absolute;
            left: 0;
            /* 定义动画的规制 linear匀速运动*/
            animation: move 1.6s linear 0s infinite;
            //动画名称move   动画执行的时间是1.6s  匀速（linear） 0s(不延迟)   infinite(动画执行无数次)
        }
        //调用动画
        @keyframes move {
            from {
                left: 0;
                background: pink;
            }

            to {
                left: 400px;
                background: red;
            }
        }
    </style>

<div class="demo">
        我是动画
</div>