Pause keyframe animation and animate opacity to 100%

Question

I have the following situation: With @keyframes I created a pulse animation for a button. It animates a buttons opacity from 0.3 to 0.8.

Now, when I hover the button this should pause the @keyframe animation and animates the current opacity to 1.

My HTML looks like this:

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

The hyperlink itself won't be animated, but the span inside will.

My keyframe animation:

@-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;
  }
}

And now the CSS for the button:

.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;
}

Yes, I do realize that there are some properties for other browsers missing.

Thanks for any advice and hint!