SOURCE

<div>
    
</div>

        div{
            width: 190px;
            height: 240px;
            background-image: url(https://img-blog.csdnimg.cn/20190414193914652.png);
            background-repeat: no-repeat;
            animation: xxx 1s steps(8) infinite;
        }
        
        
        @keyframes xxx{
            		/* from{
				background-position-x:0px;
			} */
			to{
				background-position-x:-1600px;
			}
        }

        .footer{
			width: 760px;
			height: 240px;
			margin: 350px auto 0 auto;
		}
		.west{
			float: left;
			width: 190px;
			height: 240px;
			/*背景不重复*/
			background-repeat: no-repeat;
		}
		.west:nth-of-type(1){
			background-image: url(https://img-blog.csdnimg.cn/20190414193914652.png);
			animation: swk 1.4s steps(8) infinite;	
		}
		.west:nth-of-type(2){
			background-image: url(https://img-blog.csdnimg.cn/20190414193927973.png);
			animation: zbj 1.4s steps(8) infinite;
		}
		.west:nth-of-type(3){
			margin: -30px;
			background-image: url(./images/west_03.png);
			animation: ts 1.4s steps(8) infinite;

		}
		.west:nth-of-type(4){
			background-image: url(./images/west_04.png);
			animation: ss 1.4s steps(8) infinite;
		}
		@keyframes swk{
			from{
				background-position-x:0px;
			}
			to{
				background-position-x:-1600px;
			}
		}
		@keyframes zbj{
			from{
				background-position-x:0px;
			}
			to{
				background-position-x:-1600px;
			}
		}
		@keyframes ts{
			from{
				background-position-x:0px;
			}
			to{
				background-position-x:-1360px;
			}
		}
		@keyframes ss{
			from{
				background-position-x:0px;
			}
			to{
				background-position-x:-1680px;
			}
		}