Question

当我将鼠标悬停在div上时，我试图获取此code来暂停动画，并且在完成后不回弹。我希望将鼠标悬停在上面时保持正方形。

我四处搜寻，发现this种暂停悬停，但没有翻译成我的代码。

/*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%);
}
}

Answer 1

应将动画定义为非悬停状态。您还应该定义动画的100%步骤，以便可以保留它，否则初始多边形将被视为动画的最后一步：

.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%);
  animation: polygons 1s forwards paused;
}

.pers:hover {
   animation-play-state:running;
}

@keyframes polygons {
  75%,100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

<div class="pers">
</div>

Answer 2

哦，您真的很接近它。只需添加100%状态的关键帧。

.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%,100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

<div class="thisUs">
      <div class="pers">
    </div>

CSS在悬停时开始和暂停动画

2 个答案: