Html 如何为Bootstrap 5导航栏按钮提供背景幻灯片动画

我试图给背景幻灯片动画引导5导航栏按钮，我想在悬停第二个背景幻灯片轻松作为动画，并涵盖了按钮，但我做错了什么，它根本不工作

.btn{
背景色：#002b5b！重要；
宽度：150px；
颜色：白色！重要；
边界半径：6px！重要；
字体大小：1rem！重要；
字体重量：500！重要；
文本转换：大写！重要；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.btn{
背景色：#002b5b！重要；
颜色：白色！重要；
边界半径：6px！重要；
字体大小：0.8rem！重要；
字体重量：500！重要；
文本转换：大写！重要；
}
}
.btn背景幻灯片{
背景色：#c23f1c！重要；
}
.btn背景幻灯片：悬停{
动画名称：动画幻灯片！重要；
动画持续时间：2s！重要；
动画计时功能：轻松！重要；
/*动画填充模式：正向*/
}
@关键帧动画幻灯片{
从{
宽度：5px！重要；
}
到{
宽度：150px！重要；
}
}

现在联系