Html 悬停时完成css动画

我有一个css按钮动画，在按钮周围画一条线，我想要的是当你把鼠标悬停在它上面时，它会停止端点，但会继续起始点，直到它到达终点

<a href="#" class="animation purple center-block">About Us</a>
<style>
@keyframes electronic {

0%, 100% {
    background-position: 20px -30px;
}
25% {
    background-position: 150px 5px;
}
50% {
    background-position: 20px 40px;
}
75% {
    background-position: -100px 5px;
}
}
</style>

@电子关键帧{
0%, 100% {
背景位置：20px-30px；
}
25% {
背景位置：150px 5px；
}
50% {
背景位置：20px 40px；
}
75% {
背景位置：-100px 5px；
}
}

这是一把js小提琴：

编辑： 对不起，这个问题有点不清楚，但我会详细说明

目前，这条线绕着圆圈转，但我想要的是，当你将鼠标悬停在它上面时，它将继续运行，直到按钮有一个完整的边框

因此，基本上，线的一个点将停止，而另一个点将继续运行，直到形成整个边界为止

@font-face{
字体系列：“打开”；
字体风格：普通；
字体大小：300；
src:local（“开放无光”），local（“开放无光”），url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff)格式（“woff”）；
}
身体{
背景色：黑色；
颜色：白色；
字号：500；
}
*，*：之前，*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
html，正文{
填充：0；
保证金：0；
宽度：100%；
身高：100%；
}
.标题{
边缘顶部：15vh；
边缘底部：10vh；
}
img{
宽度：自动；
身高：100%；
}
a{
显示：块；
利润率：10px；
文字装饰：无；
颜色：继承；
}
a、 粉红色：悬停{
文字装饰：无；
颜色：#ffffff；
/*背景色：#EA238D*/
}
a、 绿色：悬停{
文字装饰：无；
颜色：#47ea2f；
}
a、 蓝色：悬停{
文字装饰：无；
颜色：#0920a8；
}
a、 紫色：悬停{
文字装饰：无；
颜色：#67008e；
}
.动画{
宽度：200px；
填充：20px；
文本对齐：居中；
位置：相对位置；
背景：#000000；
颜色：#fff；
字体：13px打开，塔荷马；
}
.动画svg{
高度：58px；
左：0；
位置：绝对位置；
排名：0；
宽度：100%；
}
.动画矩形{
填充：无；
行程：#e9b667；
笔划阵列：110、130；
行程偏移：3；
笔画宽度：4；
过渡：所有1.35秒三次贝塞尔（0.19,1,0.22,1）0；
}
.动画：悬停矩形{
笔划数组：422,0；
笔画宽度：4；
过渡：所有1.35秒三次贝塞尔（0.19,1,0.22,1）0；
}

---

您可以使用svg跟踪矩形

我在你的小提琴上添加了一些代码，但是如果你这样做的话，你可能需要学习更多的svg

Stroke dasharray是一组表示边框、暗空间和空白的值。如果有0个暗空间和100个白空间，这意味着它全部是空白的。我们可以设置多达100个暗空间和0个白空间的动画

路径长度将此数组限制为一个和。如果路径长度为1000，则会看到更多填充的虚线边框（尝试一下，它看起来也很整洁！）

您还可以使用stroke dashoffset，这样它可以填充，但也可以像它那样四处移动

下面是一个具有上述更改的示例（不同的路径长度和添加的dashoffset）

玩得开心

编辑：这是一个对悬停做出反应的版本

编辑2：这会对悬停作出反应，并包含关于我们的文本

---

那么你到底想要什么？你的问题不够清楚。这就是你要问的吗？我已经更新了我的代码。请检查。这并不能解决OP的问题。如果尚未阅读最新编辑，请阅读。如何在文本周围放置svg您可以在svg元素内部放置

一些文本。更新答案，请点击此处
<svg>
   <rect stroke='purple' stroke-width=1 
     x=5 y=5 width=50 height=50 
     stroke-dasharray="100,0" pathlength='100' />
</svg>

@keyframes dasharray {

    0%, 100% {
        stroke-dasharray: 100,0;
    }

    50% {
        stroke-dasharray: 0,100;
    }


}

svg rect {
    animation: dasharray 2s infinite linear;
}