<div class="box-container">
  <div class="box">
    <input type="text" placeholder="Focus on me">
    <span></span>
  </div>
</div>

html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
}
* {
  box-sizing: border-box;
}

$focusColor:#0099ef;
.box-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  .box {
    margin-bottom: 30px;
    display: inline-block;
    position: relative;
    input {
      padding: 5px 10px;
      height: 45px;
      font-size: 1em;
      line-height: 45px;
      border: 2px solid #ccc;
      width: 400px;
      outline: none;
      background: #fff; 
      color: #a2a5a7;
      &:focus {                 
        + span {      
          width: 100%;
          opacity: 1;
          transform:translateX(0);
          &:before {
            top: 0;
            left: 0;
            width: 100%;
          }
          &:after {
            bottom: 0;
            left: 0;
            width: 100%;
          }
        }
      }
      + span {
          display: inline-block;
          position: absolute;
          left: 0;
          top: 0;        
          border-left: 2px solid $focusColor;
          border-right: 2px solid $focusColor;
          width: calc(100% + 100px);
          transform:translateX(-50px);
          height: 100%;
          pointer-events: none;
          opacity: 0;
          transition-property:opacity, width;
          transition: .3s ease-out;
          
          &:before,&:after{
            content: "";
            display: inline-block;
            position: absolute;   
            left: 25px;
             transition-property:top, bottom;
            transition: .3s ease-out;
            height: 2px;
            width: calc(100% - 50px);
            background: $focusColor;
          }
          &:before {           
            top: -30px;                        
          }
          &:after {
            bottom: -30px;
          }
        }
    }
  }
}