效果图：
传不上来。。。
在线预览地址：地址
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片滚动</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{padding: 0;margin: 0;}
.out{
width: 900px;
height: 300px;
margin: 20px auto;
overflow: hidden;
text-align: center;
}
.con{
width: 3300px;
height: 300px;
overflow: hidden;
animation: move 8s linear infinite normal;
animation-fill-mode:forwards;
}
.con:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
@keyframes move{
0%{transform:translateX(0px);}
100%{transform:translateX(-2400px);}
}
.con li{
float: left;
list-style: none;
overflow: hidden;
}
.con img{
float: left;
width: 300px;
height: 300px;
}
.pause{
position: relative;
height: 60px;
display: inline-block;
margin: 20px auto;
text-align: center;
}
.pause:before{
position: absolute;
content: "Pause";
display: inline-block;
width: 100px;
height: 60px;
left: 0px;
line-height: 60px;
font-size: 20px;
color: #fff;
margin: 0 20px;
background: #6293d3;
border: none;
border-radius: 20px;
outline: none;
}
.out input{
display: none;
}
.out input:checked ~ .con{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
.out input:checked ~ .pause:before{
content: "Start";
}
</style>
</head>
<body>
<div class="out">
<input id="ipt1" type="checkbox" name="" value="">
<label for="ipt1" class="pause">
</label>
<ul class="con">
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889462125&di=7c906a8c0dcc2a845c7d28a201318752&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8c1001e93901213fe4c06e3958e736d12e2e9567.jpg" alt=""></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889488116&di=21ae4bf7271789353831cdaacdb06a07&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F9358d109b3de9c821370156d6081800a19d8433f.jpg" alt=""></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515298&di=a58343b0c4bcc997236124fbf15c31be&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F738b4710b912c8fc505ae929f0039245d78821ac.jpg" alt=""></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515297&di=39e7b6a09eb64717364e69ac579de339&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eeef490028befb43166d22df3c.jpg" alt=""></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515296&di=0eaccd9930036823ec3df5cb9c7094d0&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb219ebc4b74543a96a58c53112178a82b801148f.jpg" alt=""></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515296&di=8e001573a25c2ab547dd864b627ef9ce&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc8ea15ce36d3d539433a63213687e950342ab0c9.jpg" alt=""></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515295&di=594c0cff7730153188615749b6f552aa&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F960a304e251f95cacc952852c5177f3e660952f5.jpg" alt=""></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515295&di=0ac3110ebb1af9e59d187ee6b674fb71&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F342ac65c103853434cc02dda9f13b07eca80883a.jpg" alt=""></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889462125&di=7c906a8c0dcc2a845c7d28a201318752&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8c1001e93901213fe4c06e3958e736d12e2e9567.jpg" alt=""></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889488116&di=21ae4bf7271789353831cdaacdb06a07&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F9358d109b3de9c821370156d6081800a19d8433f.jpg" alt=""></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515298&di=a58343b0c4bcc997236124fbf15c31be&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F738b4710b912c8fc505ae929f0039245d78821ac.jpg" alt=""></li>
</ul>
</div>
</body>
</html>参考的菜鸟教程的：
http://www.runoob.com/try/try.php?filename=trycss3_animation3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
