如何为输入边框设置动画？

Question

我正在尝试使用此Codepen为输入元素设置动画：

Codepen

但是我想更改输入徽标的box div，以使效果起作用。

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

但是我不了解如何将动画更改为输入的边框，而不是围绕“框” div。

目前，我可以通过将输入内容放在div框中来获得此动画：

如何更改动画的输入元素的box div生效？