暂停关键帧动画并将动画不透明度设置为100％

Question

我有以下情况：使用@keyframes我为按钮创建了脉冲动画。 它为按钮的不透明度从0.3到0.8设置动画。

现在，当我将鼠标悬停在按钮上时，这应该暂停@keyframe动画并将当前的不透明度设置为1。

我的HTML看起来像这样：

<a href="#next" class="btn btn-next-section"><span>next</span></a>

超链接本身不会被动画处理，但是其中的跨度会被激活。

我的关键帧动画：

@-webkit-keyframes pulse {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.3;
  }
}

@-moz-keyframes pulse {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.3;
  }
}

@-ms-keyframes pulse {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.3;
  }
}

现在是按钮的CSS：

.btn.btn-next-section span {
  opacity: 0.5;
  /* I removed some code here */
  text-indent: -99999px;
  background: url(../images/next-section.png) center no-repeat;

  /* The pulse animation */
  -moz-animation: pulse 2s infinite ease-in-out;
  -webkit-animation: pulse 2s infinite ease-in-out;
  animation: pulse 2s infinite ease-in-out;

  /* One part for the later opacity animation on hover which does not work */
  -moz-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.btn.btn-next-section:hover span {
  /* No animation on hover */
  -webkit-animation: none;
  animation: none;

  /* And the change of the opacity to 1. */
  -moz-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

是的，我的确意识到其他浏览器缺少某些属性。

感谢您的任何建议和提示！