SQ12345_Web/WebChartBigNew/css/animation.css

.step2_line {
    background-image: url(../img/step2_line.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1600px;
    width: 120px;
    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: 650px;  
	top: 282px;
	animation: step2_line 2s linear 0s infinite;
	}
.posi_line2{
	left: 2010px;  
	top: 282px;
	animation: step2_line 2s linear 2s infinite;
}
.posi_line3{
	left: 2780px;  
	top: 950px;
	animation: step3_line_l 2s linear 4s infinite;
}
.posi_line4{
	left: 4520px;  
	top: 1030px;
	animation: step3_line_r 2s linear 6s infinite;
}
.posi_line5{
	left: 5970px;  
	top: 282px;
	animation: step2_line 2s linear 8s infinite;
}
.step3_line_l {
    background-image: url(../img/step3_line_l.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 925px;
    width: 480px;
    animation: step3_line_l 2s linear 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); }
}
.step3_line_r {
    background-image: url(../img/step3_line_r.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 925px;
    width: 480px;
    animation: step3_line_l 2s linear infinite;
    z-index: 3333;
}
@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); }
}