Html 初始动画后CSS悬停不起作用

我有一个基本的按钮，最初我会设置它的动画。但一旦动画，我想添加一个新的动画悬停；但出于某种原因，它似乎不起作用

例如：

按钮动画：

.container{
宽度：100%；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
最大高度：100%；
溢出：隐藏；
}
.幻灯片btn{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边界半径：100%；
背景色：#feffff；
盒影：0 2px20px 0#686f7638；
边缘顶部：10px；
宽度：45px；
高度：45px；
动画：测试1秒前进速度；
}
.幻灯片btn：悬停{
转换：比例（1.5）；
}
@关键帧测试{
到{
转换：translateX（100px）；
}
}

>

是的，这是因为

向前

使动画覆盖变换。您可以执行以下操作，而不是转发

：


.container{
宽度：100%；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
最大高度：100%；
溢出：隐藏；
}
.幻灯片btn{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边界半径：100%；
背景色：#feffff；
盒影：0 2px20px 0#686f7638；
边缘顶部：10px；
宽度：45px；
高度：45px；
转换：translateX（100px）；
过渡：0.5s；
动画：测试1s的易用性；
}
.幻灯片btn：悬停{
变换：translateX（100px）标度（1.5）；
}
@关键帧测试{
从{
转换：translateX（0px）；
}
}

>
我试图避免设置初始变换值。这就是为什么我需要前锋。还有别的办法吗？@Doodoo你想不想在悬停状态下转换？如果你不需要转换，我有另一种方法来处理Forwards。我需要悬停时的转换，以及使用ForwardsId的初始动画。你有没有找到解决方法？如果我理解正确：按钮一直向右移动，悬停时，它的比例为1.5。在您的理想世界中：您是否希望按钮在悬停时保持移动（如果您不跟随它，最终将不会被发现）？动画是否在悬停后继续（比例=1表示未悬停）？