Html 为什么更改div:：before（悬停时）的宽度一开始是正确的，但之后是错误的？

我试图在悬停按钮的下划线上创建一种“流星”动画。我已经成功地实现了我想要的，并且它在第一次悬停时正确地发射，但是如果你再次悬停在它上面，转换就会出现故障，不能按预期工作。您在其上悬停的次数越多，其不再工作点的宽度变化越小

我想知道是否有人能解释为什么会发生这种情况

这是一个

.btn{
位置：相对位置；
字体大小：40px；
}
.btn：：之前{
内容：''；
高度：1px；
宽度：100%；
背景色：红色；
位置：绝对位置；
底部：-1px；
右：0；
-webkit过渡：所有0.5s线性；
-moz过渡：所有0.5s线性；
-ms转换：所有0.5s线性；
过渡：所有0.5s线性；
}
.btn：：之后{
内容：''；
高度：1px；
宽度：0；
背景颜色：蓝色；
位置：绝对位置；
底部：-1px；
左：0；
-webkit过渡：所有0.5s线性；
-moz过渡：所有0.5s线性；
-ms转换：所有0.5s线性；
过渡：所有0.5s线性；
-webkit转换延迟：0.5s；
-moz转换延迟：0.5s；
-ms转换延迟：0.5s；
过渡延迟：0.5s；
}
.btn:悬停：：之前{
宽度：0；
}
.btn:悬停：：之后{
宽度：100%；
}

---

按钮

在@something的帮助下，我自己解决了这个问题。对于将来可能需要此功能的任何人来说，反向动画速度太慢，因此在再次悬停在元素上之前是不完整的。为反转动画添加0的过渡解决了该问题

.btn{
位置：相对位置；
字体大小：40px；
}
.btn：：之前{
内容：''；
高度：1px；
宽度：100%；
背景色：红色；
位置：绝对位置；
底部：-1px；
右：0；
-webkit转换：所有0易于输入输出；
-moz转换：所有0都易于输入输出；
-ms转换：所有0易于输入输出；
过渡：所有0都易于输入输出；
}
.btn：：之后{
内容：''；
高度：1px；
宽度：0；
背景色：红色；
位置：绝对位置；
底部：-1px；
左：0；
-webkit转换：所有0易于输入输出；
-moz转换：所有0都易于输入输出；
-ms转换：所有0易于输入输出；
过渡：所有0均为线性；
}
.btn:悬停：：之前{
宽度：0；
-webkit过渡：所有0.4s易入易出；
-moz转换：所有0.4易入易出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4s线性；
}
.btn:悬停：：之后{
宽度：100%；
-webkit过渡：所有0.4s易入易出；
-moz转换：所有0.4易入易出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4s线性；
-webkit转换延迟：0.4s；
-moz转换延迟：0.4s；
-ms转换延迟：0.4s；
过渡延迟：0.4s；
}

---

按钮

.btn:hover:：在{width:0！important；}之前。btn:hover:：在{width:100%！important；}之后

可能是因为返回对象时反向动画仍在进行吗？撤消动画也需要

.5s

。将此功能与您的

缓进/缓出

定时功能相结合，它将看起来不同步。尝试几件事：将计时功能设置为

线性（我们的大脑通常更善于理解它），并将元素的颜色更改为与众不同的颜色，这样您就可以更清楚地了解实际发生的情况。谢谢@somethinghere的建议。这帮助我看到动画尚未完成。知道如何解决这个问题吗？有没有办法加快反向动画的速度？是的，在常规元素上将
过渡持续时间设置为较低的值，并设置为现在悬停时的长度。当悬停被取消应用时，它将加快速度。您可以删除：：before和：：after元素上的转换属性，对吗？您可能还应该将转换延迟设置为0，否则0（瞬间）转换将需要.5s。此外，请将它们保留在您的前后，因为您可能只想将其缩短为像
.1s
这样的小得离谱的长度-对于大多数人来说反应太快，但他们仍然可以看到元素优雅地自行重置。