CSS 悬停时启动和暂停动画

Question

我正在尝试让这个 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%);
}
}

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 悬停时启动和暂停动画

CSS start and pause animation on hover

html

css

keyframe

css-animations

clip-path