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

【问题标题】：CSS start and pause animation on hoverCSS在悬停时开始和暂停动画
【发布时间】：2019-03-25 10:45:37
【问题描述】：

我试图让这个code 暂停动画，并且在我悬停在div 上时完成后不回弹。当我悬停在它上面时，我希望它保持一个正方形。

我四处搜索，发现 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%);
}
}

【问题讨论】：

标签： html css css-animations keyframe clip-path

【解决方案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>

【讨论】：

这种解决了我的问题。除了我希望它在你停止悬停后恢复“正常”。
@Satrat 在这种情况下你可以考虑转换：jsfiddle.net/4357avfu/1

【解决方案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>

【讨论】：