CSS3 animation 实现跑马灯效果

可以使用CSS3的animation属性实现跑马灯效果，具体的animation相关属性可以参考w3cshool官网详细的介绍了animation属性

实现动画效果animation的步骤

第一步先使用过@keyframs定义动画

第二步调用动画，animation-name（动画名称）与animation-duration（持续时间）这两个属性是必要的

html

css

 /* 1、定义动画 */
        @keyframes move {
            0% {
                transform: translate(0, 0);
                background-color: red;
            }

            100% {
                transform: translate(1000px, 0);
                background-color: blue;
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: red;
        /*简写
         animation:名字 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束的状态     
        */
            animation: move 2s linear 0s infinite backwards;

        }