.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); } }