Css 输入[类型=文本]转换延迟不工作

我将以下样式用于一个简单的输入文本框，我希望虚线边框在焦点上设置为实体动画，反之亦然

        input {
            font-family: inherit;
            font-size: large;
            border: 2px solid #1bd55a;
            border-radius: 5px;
        }
        input[type=text] {
            width: 500px;
            height: 30px;
            color: #616161;
            padding-left: 6px;
            border-style: dashed;
            background-color: rgba(27, 213, 90, 0.12);
            transition: 0.3s;
        }
        input[type=text]:focus {
            border-style: solid;
            outline: none; /* gets rid of the blue outline. */
        }

但是，对于当前代码，虚线和实体之间的转换是即时的，没有动画。我正在设置单个属性的动画，我知道可以使用svg的

stroke

属性来实现这一点，因此如何将其正确应用于文本输入？

根据以下内容：

---

边框样式属性不可设置动画。

不幸的是，边框样式不是可设置动画的属性。但是，您可以通过一些额外的标记和边框颜色来实现这种效果

输入{
字体家族：继承；
字体大小：大号；
边框：2px实心#1bd55a；
边界半径：5px；
}
输入[类型=文本]{
宽度：500px；
高度：30px；
颜色：#6161；
左侧填充：6px；
背景色：rgba（27,213,90,0.12）；
边框颜色：rgba（27,213,90,0.12）；
过渡：0.3s；
保证金：-2px；
}
输入[类型=文本]：焦点{
边框颜色：#1bd55a；
大纲：无；/*删除蓝色大纲*/
}
界外分区{
显示：内联块；
边框：2个虚线#1bd55a；
边界半径：5px；
}