Html CSS在悬停时启动和暂停动画

当我在

div

上悬停时，我试图让它暂停动画，而不是在完成后快速恢复。当我在上面盘旋时，我希望它保持正方形

我四处搜索，发现了一种暂停悬停，但它并没有翻译成我的代码

/*HTML*/
 <div class="pers">
/*CSS*/
.pers{
 margin-bottom: -4px;
 width: 300px;
 height: 300px;
 display: inline-block;
 background-color: green;
 clip-path: polygon(50% 52%, 100% 0, 100% 100%, 0% 100%);
}
.pers:hover{
 animation: polygons 1s;
 animation-fill-mode: forwards;
}
@keyframes polygons {
 75% 
{
 clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}

/*HTML*/
/*CSS*/
伯斯先生{
保证金底部：-4px；
宽度：300px；
高度：300px；
显示：内联块；
背景颜色：绿色；
剪辑路径：多边形（50%52%，100%0，100%100%，0%100%）；
}
.pers:悬停{
动画：多边形1s；
动画填充模式：正向；
}
@为多边形设置关键帧{
75% 
{
剪辑路径：多边形（0,100%0,100%100,0%100%）；
}
}

应在非悬停状态下定义动画。您还应定义动画的

100%

步骤，以便保留该步骤，否则初始多边形将被视为动画的最后一步：

.pers{
保证金底部：-4px；
宽度：300px；
高度：300px；
显示：内联块；
背景颜色：绿色；
剪辑路径：多边形（50%52%，100%0，100%100%，0%100%）；
动画：多边形向前暂停1s；
}
.pers:悬停{
动画播放状态：运行；
}
@为多边形设置关键帧{
75%,100% {
剪辑路径：多边形（0,100%0,100%100,0%100%）；
}
}

---

哦，你离它真的很近了。只需为

100%

状态添加关键帧即可

.pers{
保证金底部：-4px；
宽度：300px；
高度：300px；
显示：内联块；
背景颜色：绿色；
剪辑路径：多边形（50%52%，100%0，100%100%，0%100%）；
}
.pers:悬停{
动画：多边形1s；
动画填充模式：正向；
}
@为多边形设置关键帧{
75%,100% {
剪辑路径：多边形（0,100%0,100%100,0%100%）；
}
}

这一类解决了我的问题。除非我想在你停下来之后再回到“正常”。@ Satrat，在这种情况下，你可以考虑过渡：