CSS：当鼠标悬停时，关键帧动画消失

我的div在悬停时在其边界上有一个动画

正文{
填充：50px；
背景色：#000；
文本对齐：居中；
}
div{
宽度：50px；
高度：50px；
边框：1px实心rgba（255255,0.1）；
显示：内联块；
利润率：0.10px；
}
div:悬停{
动画：向前闪烁750ms；
}
@关键帧闪烁{
0% {
左边框颜色：rgba（255255,0.1）；
右边框颜色：rgba（255255,0.1）；
}
33% {
左边框颜色：rgba（255255,1）；
右边框颜色：rgba（255255,1）；
}
66% {
左边框颜色：rgba（255255,0.1）；
右边框颜色：rgba（255255,0.1）；
}
100% {
左边框颜色：rgba（255255,1）；
右边框颜色：rgba（255255,1）；
}
}

您可以尝试以下方法：

正文{
填充：50px；
背景色：#000；
文本对齐：居中；
}
div{
宽度：50px；
高度：50px；
边框：1px实心rgba（255255,0.1）；
显示：内联块；
利润率：0.10px；
转换：1000s；/*阻止更改*/
}
div:悬停{
动画：闪烁750ms；/*向前移动*/
/*添加动画的最后状态*/
左边框：1px实心rgba（255255,1）；
右边框：1px实心rgba（255255,1）；
/*---*/
转换：.5s；/*悬停时快速更改*/
}
@关键帧闪烁{
0% {
左边框颜色：rgba（255255,0.1）；
右边框颜色：rgba（255255,0.1）；
}
33% {
左边框颜色：rgba（255255,1）；
右边框颜色：rgba（255255,1）；
}
66% {
左边框颜色：rgba（255255,0.1）；
右边框颜色：rgba（255255,0.1）；
}
100% {
左边框颜色：rgba（255255,1）；
右边框颜色：rgba（255255,1）；
}
}

---

谢谢您的回答。看起来白色边框在动画之后仍然存在，而且当我将鼠标悬停在远处时，动画将中断。我希望动画完成。