Как анимировать границу ввода?

Question

Я пытаюсь анимировать элемент ввода, используя эту кодовую ручку:

Кодовая ручка

Но я хочу изменить поле div для входного логотипа для эффектадействовать.

<div class="box">
  <div class="top"></div>
  <div class="bottom"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

Однако я не понимаю, как изменить анимацию на границу входа, вместо того, чтобы окружать разделитель 'box'.

В настоящее время я могу управлятьчтобы получить эту анимацию, поместив ввод в поле div:

Как бы я изменил блок div для элемента ввода для анимации, чтобы она вступила в силу?