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

Question

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

密码笔

但我想更改框 div 以获取输入徽标以产生作用。

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

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

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

如何更改输入元素的框 div 以使动画生效？

标签： cssanimationinputcss-animations