CSS Animation for Webpage Intros

body {
  margin-top:0px;
}

.line {
      position: absolute;
			left: 0;
			height: 10%;
      animation-fill-mode: forwards !important;
}

#line_1{
      background-color: #4158D0;
      background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
			animation: draw 4s 0s linear;
		}

#line_2{
      top:10%;
			background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

			animation: draw 4s 2s  linear; 
		}

    #line_3{
      top:20%;
			background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

			animation: draw 3s 1s  linear;
		}

    #line_4{
      top:30%;
			background-color: #D9AFD9;
background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);

			animation: draw 2s 2s  linear;   
		}

    #line_5{
      top:40%;
			background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);

			animation: draw 2s 1s  linear;
		}

    #line_6{
      top:50%;
			background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

			animation: draw 4s 0s  linear;
      border: 1px solid #FBAB7E;
		}

#line_7{
      top:60%;
			background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

			animation: draw 4s 2s  linear;
		}

    #line_8{
      top:70%;
      background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

			animation: draw 3s 1s linear;
		}

    #line_9{
      top:80%;
      background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

			animation: draw 2s 2s linear;     
		}

    #line_10{
      top:90%;
			background-color: #D9AFD9;
background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);

			animation: draw 2s 1s linear;
		}



    @keyframes draw{
			0%{
				width: 0%;
			}
			100%{
        width: 100%;
      }
    }

 

    
  
    
  
    
  
    
  
    

    
  
    
  
    
  
    
  

See the Pen Animated CSS Background for Webpage Intros by Devtutorials4u (@devtutorial4u) on CodePen.