* { margin:0; padding:0; list-style:none; } div { width:600px; height:400px; margin:0 auto; border:solid 1px red; position:relative; overflow:hidden; } ul { width:2400px; height:400px; position:absolute; left:0; animation:aa 4s linear 0s infinite alternate; } li { width:600px; height:400px; font:60px/400px "微软雅黑"; font-weight:600; text-align:center; float:left; background-color:cornflowerblue; } @keyframes aa { 0% { left:0; } 12.5% { left:0; } 25% { left:-600px; } 37.5% { left:-600px; } 50% { left:-1200px; } 62.5% { left:-1200px; } 85% { left:-1800px; } 100% { left:-1800px; } }.li1 { background-color:#0000FF; } .li2 { background-color:red; } .li3 { background-color:forestgreen; } .li4 { background-color:red; }