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