I'm trying to implement an animation to search box, but its not working

Question

I'm building a search box with animation and have something wrong in my code

.smallbox {
  width: 285px;
  height: 40px;
  background-color: white;
  border: 1px solid #6c757d;
  border-radius: 3px;
  text-align: center;
}

.searchbox {
  padding: 8px 20px 6px 10px;
  border: none;
  height: 26px;
  font-size: 13px;
  width: 201px;
}

#BorderBlue {
  animation-name: toblue;
}

@keyframes toblue {
  0% {
    border: 1px solid #6c757d;
  }
  100% {
    border: 1px solid #4baaf5;
  }
}

<div style="margin: 15px 30px">
  <div class="smallbox" id="BorderBlue;">
    <span style="border: none"><input class="searchbox" type="text" placeholder="Search.."
            /></span>
    <div style="width: 50px; display: inline-block; text-align: center">
      &#8744;
    </div>
  </div>
</div>

What I'm trying to get enter image description here

enter image description here

Answer 1

you can achieve that by changing your border color on hover. Let me know if this is what you mean

.smallbox {
  width: 285px;
  height: 40px;
  background-color: white;
  border: 2px solid #6c757d;
  border-radius: 3px;
  text-align: center;
}
.searchbox {
  padding: 8px 20px 6px 10px;
  border: none;
  height: 26px;
  font-size: 13px;
  width: 201px;
}

.smallbox:hover {
  border: 2px solid #4baaf5;
  border-radius: 3px;

  }

<div style="margin: 15px 30px">
      <div class="smallbox" >
        <span style="border: none"
          ><input class="searchbox" type="text" placeholder="Search.."
        /></span>
        <div style="width: 50px; display: inline-block; text-align: center">
          &#8744;
        </div>
      </div>
    </div>