CSS3绘制边框动画

Question

我试图在css3中为边框设置动画以获得绘图效果（从右到左循环）

目前我刚刚拥有它，所以它在悬停时消失

.info-circle-sub-def{
border: 1px solid #111111;
border-radius: 50%;
}

.info-circle-sub-def:hover{
animation: drawBorder 2s forwards;
}

@keyframes drawBorder {
to {
border: 1px solid #d6a318;
}
}

image of golden border

Answer 1

检查我刚制作的快速笔。您可以根据需要进行编辑。

pen example https://codepen.io/stojko/pen/YZgByQ