CSS：悬停时关键帧动画消失

Question

悬停时，我的 div 的边框上有动画。

body {
  padding: 50px;
  background-color: #000;
  text-align: center;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.1);
  display: inline-block;
  margin: 0 10px;
}

div:hover {
   animation: blink 750ms forwards;
}


@keyframes blink {
  0% {
    border-left-color: rgba(255,255,255,0.1);
    border-right-color: rgba(255,255,255,0.1);
  }

  33% {
    border-left-color: rgba(255,255,255,1);
    border-right-color: rgba(255,255,255,1);
  }

  66% {
    border-left-color: rgba(255,255,255,0.1);
    border-right-color: rgba(255,255,255,0.1);
  }

  100% {
    border-left-color: rgba(255,255,255,1);
    border-right-color: rgba(255,255,255,1);
  }
}

<div></div>
<div></div>
<div></div>

动画按预期工作正常，但是当我将鼠标悬停在 div 上时，动画突然刹车。即使光标不在，我也想保持动画完整。

我尝试在 div 上添加 transition: border-color 300ms;，但它的行为仍然相同。

Answer 1

你可以试试这个：

body {
  padding: 50px;
  background-color: #000;
  text-align: center;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.1);
  display: inline-block;
  margin: 0 10px;
  transition:1000s; /*block the change*/
}

div:hover {
   animation: blink 750ms; /*remove forwards*/
   /*Add the last state of the animation*/
   border-left: 1px solid rgba(255,255,255,1);
   border-right: 1px solid rgba(255,255,255,1);
   /*---*/
   transition:.5s; /*make the change fast on hover*/
}


@keyframes blink {
  0% {
    border-left-color: rgba(255,255,255,0.1);
    border-right-color: rgba(255,255,255,0.1);
  }

  33% {
    border-left-color: rgba(255,255,255,1);
    border-right-color: rgba(255,255,255,1);
  }

  66% {
    border-left-color: rgba(255,255,255,0.1);
    border-right-color: rgba(255,255,255,0.1);
  }

  100% {
    border-left-color: rgba(255,255,255,1);
    border-right-color: rgba(255,255,255,1);
  }
}

<div></div>
<div></div>
<div></div>

更新

为确保动画结束，您需要保持悬停状态。一个想法是考虑一个覆盖整个屏幕的伪元素，以确保您将悬停保持到最后：

body {
  padding: 50px;
  background-color: #000;
  text-align: center;
}

div.box {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.1);
  display: inline-block;
  margin: 0 10px;
  transition:1000s; /*block the change*/
  position:relative;
}

div.box:hover {
   animation: blink 750ms; /*remove forwards*/
   /*Add the last state of the animation*/
   border-left: 1px solid rgba(255,255,255,1);
   border-right: 1px solid rgba(255,255,255,1);
   /*---*/
   transition:.5s; /*make the change fast on hover*/
}
div.box:hover:before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  animation:disappear 0.1s 0.75s forwards;
}

@keyframes disappear {
  to {bottom:100%;}
}

@keyframes blink {
  0% {
    border-left-color: rgba(255,255,255,0.1);
    border-right-color: rgba(255,255,255,0.1);
  }

  33% {
    border-left-color: rgba(255,255,255,1);
    border-right-color: rgba(255,255,255,1);
  }

  66% {
    border-left-color: rgba(255,255,255,0.1);
    border-right-color: rgba(255,255,255,0.1);
  }

  100% {
    border-left-color: rgba(255,255,255,1);
    border-right-color: rgba(255,255,255,1);
  }
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>