长图自左往右自动播放html代码

最近有需要弄个发展历程从左到右自动播放的效果页面，网上找了大半天后在知乎上看到一个可以用的代码。经过自己人调试与修改加了注释，放到这里留给有需要的人。

<!--自行修改图片地址-->
<div class="sectiongudong">
	<nav>
		<ul>
			<li>
				<img src="upload/line3.jpg" title="发展历程"/>   
			</li>
		</ul>
	</nav>
</div>
<!-- 以下关于图片的宽高的限制我都改成了AUTO，有需要限定的请自行修改 -->	
<style>
sectiongudong {
	width: auto;
	height: auto;
	border-top: 5px solid #65587f;
	border-left: 5px solid #f18867;
	border-right: 5px solid #e85f99;
	border-bottom: 5px solid #50bda1;
	}
.heart-eye {
position: absolute;
top: 50%;
animation: pulse 1s ease-out infinite;
}
.heart-eye:last-child {
left: auto;
right: auto;
animation: pulse 1s ease-out infinite;
}
.heart {
display: block;
width: 32px;
height: 32px;
background: #e25d5d;
transform: rotate(-45deg);
}
.heart:before,.heart:after {
content: "";
position: absolute;
width: 32px;
height: 32px;
border-radius: 80%;
background-color: #e25d5d;
}
.heart:before {
top: -16px;
left: 0;
}
.heart:after {
left: 16px;
top: 0;
}
@keyframes pulse {
30% {
transform: scale(1.2, 1.2) ;
}
70% {
transform: scale(1, 1) ;
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
nav {
width: auto;
height: auto;
overflow: hidden;
}
nav li {
float: left;
}
nav img{
width: auto;
height: auto;
}
nav ul {
width: auto;
animation: moving 120s linear infinite alternate; 
} 
@keyframes moving {
form {
transform: translateX(0);
}
to {
transform: translateX(-10000px);  
}                    
}
nav:hover ul {
animation-play-state:paused; 
}
</style>
<!--animation: moving 120s linear infinite alternate; 
这里是设置120s跑完全力，请用自行根据自己图宽度修改时间-->
<!-- transform: translateX(-10000px) 这里是设置图片左轮动的总像素，根据你的图片width来自行设定。这样图片左右滚动不出现多余的空白-->

本代码主要修改：

1：调用的图片

2：设置左右播放的时长，注意要根据自己的图片宽度来调整

3：设置图片右轮动的总宽度，如果没设置好可能会造成图片只跑一半。

以请自行修改后测试。作者已实测正常