Html 动画完成后是否返回到原始边界状态？

我在悬停时使用边界动画输入！我无法在动画属性中设置

边框宽度

，因此我设置了

：hover

。动画完成后，我希望返回原始边框状态，但边框仍保持为

3px

！如何解决

输入{
保证金：1.2rem；
填充物：5px10px；
}
.pp{
保证金：1.2rem；
最小宽度：10px；
高度：10px；
}
输入：悬停{
-webkit动画名称：哈哈；
-webkit动画持续时间：1s；
轮廓：无；边框宽度：3倍；
动画计时功能：轻松进出；
}
@-webkit关键帧哈哈{
0% {
左边框：纯红色；
不透明度：.3；
}
20% {
上边框：纯红；
不透明度：.7；
}
50% {
右边框：纯红色；
不透明度：.5；
}
70% {
边框底部：纯红色；
不透明度：.9
}
100% {
}
}

这和你所期望的一样吗？请查收

输入{
保证金：1.2rem；
填充物：5px10px；
}
.pp{
保证金：1.2rem；
最小宽度：10px；
高度：10px；
}
输入：悬停{
边框：1px实心#ccc；
-webkit动画名称：哈哈；
-webkit动画持续时间：1s；
大纲：无；
动画计时功能：轻松进出；
}
@-webkit关键帧哈哈{
0% {
左边框：纯红色；
不透明度：.3；
}
20% {
上边框：纯红；
不透明度：.7；
}
50% {
右边框：纯红色；
不透明度：.5；
}
70% {
边框底部：纯红色；
不透明度：.9
}
100% {
}
}

只需从悬停效果中删除

边框宽度：3px

即可实现此目的。请在下面的代码片段中尝试

输入{
保证金：1.2rem；
填充物：5px10px；
}
.pp{
保证金：1.2rem；
最小宽度：10px；
高度：10px；
}
输入：悬停{
-webkit动画名称：哈哈；
-webkit动画持续时间：1s；
大纲：无；
边框宽度：1px；
动画计时功能：轻松进出；
}
@-webkit关键帧哈哈{
0% {
左边框：纯红色；
不透明度：.3；
}
20% {
上边框：纯红；
不透明度：.7；
}
50% {
右边框：纯红色；
不透明度：.5；
}
70% {
边框底部：纯红色；
不透明度：.9
}
}

您正在寻找的CSS是：

             animation-fill-mode: 
     -webkit-animation-fill-mode:

“动画填充模式”（animation fill mode）属性指定动画未播放时（动画完成时或延迟时）元素的样式

默认情况下，CSS动画不会影响元素，直到第一个关键帧“播放”，然后在最后一个关键帧完成后停止。“动画填充模式”属性可以替代此行为

有关更多信息：

---

我刚刚添加了

边框：1px实心#ccc！重要的打开
输入：悬停
我不想使用
！重要信息
作为我的编码标准。所以你可以不用它来编辑答案：）@DavidJorHpan立即检查问题是我不能在动画中设置边框宽度，而不先在
：hover
！！好的，谢谢，别忘了帮上忙并投票表决