AnYang_UI/WebChartBig/css/animation.css

.step1_line {
    background-image: url(../img/step1_line.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1510px;
    width: 240px;
    /*animation: step2_line 2s linear infinite;*/
    z-index: 999999;
}
.step2_line {
    background-image: url(../img/step2_line.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1012px;
    width: 232px;
    /*animation: step3_line_l 2s linear infinite;*/
}
.step3_line {
    background-image: url(../img/step3_line.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1012px;
    width: 235px;
   /* animation: step3_line_l 2s linear infinite;*/
    z-index: 3333;
}
.step4_line {
    background-image: url(../img/step4_line.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1530px;
    width: 220px;
   /* animation: step2_line 2s linear infinite;*/
    z-index: 999999;
}
@keyframes step2_line {
	0% { clip: rect(1600px, 120px, 1600px, 0px); }
	50% { clip: rect(0px, 120px, 1600px, 0px); }
	100% { clip: rect(0px, 120px, 0px, 0px); }
}
.posi_line1{
	left: 800px;  
	top: 310px;
	/*animation: step2_line 2s linear 0s infinite;*/
	}
.posi_line3{
	left: 2780px;  
	top: 650px;
	/*animation: step3_line_l 2s linear 4s infinite;*/
}
.posi_line4{
	left: 4730px;  
	top: 650px;
	/*animation: step3_line_r 2s linear 6s infinite;*/
}
.posi_line5{
	left: 6580px;  
	top: 310px;
	/*animation: step2_line 2s linear 8s infinite;*/
}

@keyframes step3_line_l {
	0% { clip: rect(0px, 0px, 925px, 0px); }
	50% { clip: rect(0px, 480px, 925px, 0px); }
	100% { clip: rect(0px, 480px, 925px, 480px); }
}

@keyframes step3_line_l {
	0% { clip: rect(0px, 0px, 925px, 0px); }
	50% { clip: rect(0px, 480px, 925px, 0px); }
	100% { clip: rect(0px, 480px, 925px, 480px); }
}