* { padding: 0; margin: 0; } div { width: 882px; height: 76px; margin: 100px auto; background-color: #ddd; overflow: hidden; } div>ul { width: 200%; list-style: none; /*1.设置的名称*/ animation-name: move; /*2.设置动画的耗时*/ animation-duration: 7s; /*3.市场无限循环*/ animation-iteration-: infinite; /*4.设置时间函数*/ animation-timing-function: linear; } div>ul>li { width: 126px; float: left; } div>ul>li>img { width: 100%; } /*鼠标上移,停止动画*/ div:hover>ul { cursor: pointer; animation-play-state: paused; } /*创建动画*/ @keyframes move { from { transform: translatex(0); } to { transform: translatex(-882px); } }