<style type="text/css">
            @keyframes move{
                from{transform: translate(0,0);}
                
                to{transform: translate(1000px,0);}
            }
            div{
                width: 100px;height: 100px;background-color: pink;
                /*动画名称*/
                animation-name: move;
                /*持续时间*/
                animation-direction: 2s;
                /*运动曲线*/
                animation-timing-function: ease;
                /*何时开始*/
                animation-delay: 1s;
                /*重复次数   iteration 重复的； count  次数；infinte 无限*/
                animation-iteration-count: infinte;
                /*是否反方向播放 normal 正常； altemate  逆播放*/
                animation-direction:alternate;
                /*动画结束后的状态,默认backwards 回到起始状态.forwards 停留在结束状态;*/
                animation-fill-mode: backwards;
            }
            div:hover{
                /*鼠标经过div 让这个div停止动画,鼠标离开继续动画*/
                animation-play-state: paused;
            }
           </style>