SOURCE

const inputs = document.querySelectorAll('input');
const animate_border = document.querySelector('#animate_border');

function change_border_to(obj) {
  const rectObj = obj.getBoundingClientRect();
  animate_border.style.height = rectObj.height -2 + 'px';
  animate_border.style.width = rectObj.width -2 + 'px';
  animate_border.style.left = rectObj.left + 'px';
  animate_border.style.top = rectObj.top + 'px';
  setTimeout(() => animate_border.style.opacity = 1, 250);
}

inputs.forEach(input => {
  input.onfocus = () => change_border_to(input);
  input.onblur = () => animate_border.style.opacity = 0;
});

<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />

<div id="animate_border"></div>

#animate_border {
  position: absolute;
  left: 0; top: 0;
  width: 0;
  height: 0;
  border: 1px solid #2caac9;
  box-shadow: 0 0 10px #0af1f5;
  opacity: 0;
  transition: left 500ms, top 500ms, opacity 250ms;
  cursor: text;
  pointer-events: none;
}

input {
  outline: none;
}