Html CSS&；SVG动画

我正在制作一个按钮悬停效果。我已经设法让它动画悬停，但我正在努力扭转动画

我曾尝试更改笔划数组和偏移量，但两者似乎都不起作用

这是我的标记：

.btn{
背景：#e02c26；
字号：100；
颜色：#fff；
光标：指针；
显示：内联块；
字体大小：16px；
字体大小：400；
线高：45px；
保证金：0自动2米；
最大宽度：160px；
位置：相对位置；
文字装饰：无；
文本转换：大写；
垂直对齐：中间对齐；
宽度：100%；
}
.btn跨度{
位置：绝对位置；
宽度：100%；
文本对齐：居中；
}
.btn svg{
高度：45px；
左：0；
位置：绝对位置；
排名：0；
宽度：100%；
}
.btn rect{
填充：无；
冲程：#5656；
笔画宽度：2；
笔划数组：422,0；
}
.btn:悬停{
背景：rgba（225,51,45,0）；
字号：900；
字母间距：1px；
}
.btn:悬停矩形{
笔画宽度：5；
笔划阵列：15310；
行程偏移量：48；
-webkit过渡：所有1.35秒立方贝塞尔（0.19,1,0.22,1）；
过渡：所有1.35秒三次贝塞尔（0.19,1,0.22,1）；
}

---

您需要在.rect上设置转换，而不是悬停，因为如果将其设置为悬停，则转换仅在鼠标进入时有效，而在鼠标离开时无效

但是，如果将其设置为.rect，它将双向工作

在

.btn rect{…}

中设置转换，而不是

.btn:hover rect{…}

请参阅代码片段：

.btn{
背景：#e02c26；
字号：100；
颜色：#fff；
光标：指针；
显示：内联块；
字体大小：16px；
字体大小：400；
线高：45px；
保证金：0自动2米；
最大宽度：160px；
位置：相对位置；
文字装饰：无；
文本转换：大写；
垂直对齐：中间对齐；
宽度：100%；
}
.btn跨度{
位置：绝对位置；
宽度：100%；
文本对齐：居中；
}
.btn svg{
高度：45px；
左：0；
位置：绝对位置；
排名：0；
宽度：100%；
}
.btn rect{
填充：无；
冲程：#5656；
笔画宽度：2；
笔划数组：422,0；
-webkit过渡：所有1.35秒立方贝塞尔（0.19,1,0.22,1）；
过渡：所有1.35秒三次贝塞尔（0.19,1,0.22,1）；
}
.btn:悬停{
背景：rgba（225,51,45,0）；
字号：900；
字母间距：1px；
}
.btn:悬停矩形{
笔画宽度：5；
笔划阵列：15310；
行程偏移量：48；
}