MOVELINE

HTML

<div class="col-redlineblock">
   <div class="col-redline-r fromleft"></div> 
   <div class="col-redline scale-in-hor-right">
      </div>
      
  <div class="title">TITLE</div>

    <div class="moveline move-right"></div>
  
        </div>
        
          <div class="moveline move-right sec"></div>

CSS

.moveline{
    display: block;
    height: 0px;
    width: 5px;
    background: red;
        -webkit-animation: move-right 3s forwards;
    animation: move-right 3s forwards;
    position: absolute;
    top: 12px;
    left: 0;
        z-index: 300;
}

  @keyframes move-right { 
    0% {

    -webkit-transform: translate(0,0) scaleY(0); 
    transform: translate(0,0) scaleY(0); 
            -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
    }
      50% {
      	    -webkit-transform: translate(0,0) scaleY(1);
            -webkit-transform-origin: 100% 0%;
            transform: translate(0,0) scaleY(1);
            transform-origin: 100% 0%;
    opacity: 1;
  }
    100% {
    	-webkit-transform: translate(280px,0); 
     transform: translate(280px,0); 
     height: 90px;
    }
  }
  
.title{
	color: #222;
  font-size:96px;
    text-transform: uppercase;
}

.col-redlineblock{
	position: absolute;
	    mix-blend-mode: multiply;
}

.col-redline {
    height: 90px;
    background: red;
    position: absolute;
    top: 12px;
    z-index: 1000;
    width: 100%;
    margin-left: 0;
    display: block;
}

.col-redline-r {
height: 90px;
    background: red;
    position: absolute;
    top: 12px;
    z-index: -1;
    width: 0px;
margin-left: 0;
}

.fromleft {
  animation: fromleft 2s  cubic-bezier(.51,.28,.13, 1)   forwards;
  animation-delay: 2.5s; 
}

@keyframes fromleft {
  0% {transform: scaleX(0);
   transform-origin: 0% 0%;
  }
  100% {transform: scaleX(0.5);
  transform-origin: 30px 30px;
  width: 500px;
  }
}

@keyframes fromleft { 
  100% {
    width: 100%;
  }
}

.scale-in-hor-right {
	-webkit-animation: scale-in-hor-right 1s linear reverse both;
	        animation: scale-in-hor-right 1s linear reverse both;
	            animation-delay: 1.5s;
}

@-webkit-keyframes scale-in-hor-right {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 100% 100%;
            transform-origin:...