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

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

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

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

0 个答案: